CSS3實現Chrome瀏覽器的新LOGO

2020-03-24 16:30:56

字體：大中小

來源：轉載

供稿：網友

Google的Chrome瀏覽器更換新的LOGO，新LOGO簡潔大方，又能表達Chrome快速的含義，我們這里就用CSS3寫一個Chrome LOGO，效果如下：以上效果只能在Chrome瀏覽器里顯示僅支持webkit內核瀏覽器，別的什么都是浮云，想支持的自己多寫一點CSS3吧。代碼放出來····.chrome {
position:relative;
width:300px;
height:300px;
margin:40px 0 40px 40px;
overflow:hidden;
-webkit-border-radius:300px;
-webkit-transition:all 3s ease-in-out;
}
.chrome:hover {
-webkit-transform:translate(400px, 0) rotate(360deg)
}
.chrome div {
position:absolute;
text-indent:-9999px;
}
.heart_white {
z-index:100;
top:95px;
left:95px;
width:110px;
height:110px;
background:#fff;
-webkit-border-radius:110px;
overflow:hidden;
}
.heart {
top:10px;
left:10px;
width:90px;
height:90px;
background:#f00;
-webkit-border-radius:90px;
background:-webkit-gradient(linear, left top, left bottom, from(#80B1DA), to(#165E98));
}
.chrome_wrap {
z-index:100;
top:-100px;
left:-100px;
width:300px;
height:300px;
-webkit-border-radius:300px;
border:100px solid #fff;
}
.part_color {
width:200px;
height:210px;
opacity:0.94;
}
.part_red {
z-index:3;
top:-44px;
left:55px;
-webkit-transform:rotate(60deg);
-webkit-border-bottom-right-radius:30px;
background:-webkit-gradient(radial, 20% 30%, 20, 40% 30%, 100, from(#ED5F51), to(#DF2228));
}
.part_red2 {
z-index:9;
width:160px;
height:80px;
top:50px;
left:18px;
-webkit-transform:rotate(60deg);
background:-webkit-gradient(radial, 30% 0, 30, 40% 30%, 60, from(#E54745), to(#E12F35));
}
.part_yellow {
z-index:5;
top:95px;
right:-30px;
-webkit-border-top-left-radius:30px;
background:-webkit-gradient(radial, 30% 40%, 130, 40% 20%, 60, from(#DBA328), to(#FDD207));
}
.part_green {
z-index:7;
top:82px;
left:-25px;
-webkit-transform:rotate(117deg);
-webkit-border-top-left-radius:30px;
background:-webkit-gradient(radial, 30% 40%, 120, 30% 40%, 60, from(#419643), to(#4DB749));
}
.mask_color {
width:110px;
height:110px;
background:#fff;
}
.mask_red {
z-index:8;
height:40px;
top:60px;
left:25px;
-webkit-transform:rotate(50deg);
background:#E12F35;
}
.mask_yellow {
z-index:4;
top:105px;
right:-10px;
-webkit-transform:rotate(-12deg);
}
.mask_green {
z-index:6;
top:185px;
left:38px;
-webkit-transform:rotate(15deg);
}寫這篇文章意在提醒大家用最新的技術最新的方法去實踐最人性化的前端html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：在HTML中有哪些引用CSS的方式

下一篇：CSS 循序漸進（三）樣式“表”秀