CSS3如何制作遨游LOGO

2020-03-24 16:48:52

字體：大中小

來源：轉載

供稿：網友

很有創意的設計，用css3制作遨游瀏覽器的LOGO，具體方法如下：首先我們來看一下實現方法：先畫一個外框 width: 240px; height: 240px;border-radius: 120px;
填充背景色background:#b1e4ff;
描邊border:2px solid #789cb6;
加陰影box-shadow: 5px 5px 7px #999;
給該死的firefox3私有屬性-moz-border-radius: 120px; 再畫一個小圈，width: 230px; height: 230px;border-radius: 115px;
定位，position: relative;top:5px;left:5px;
填充背景色background:#3b99e3;
給該死的firefox3私有屬性-moz-border-radius: 115px; 扔一個大白方塊進去width: 150px; height: 100px;background:#ffffff;
定位position: relative;top:70px;left:42px;
右上大圓角20像素，其他小圓角border-radius: 3px 20px 3px 3px;
給該死的firefox3私有屬性-moz-border-radius: 3px 20px 3px 3px;
再扔一個白方塊進去width: 35px; height: 45px;background:#ffffff;
定位position: relative;top:30px;left:33px;
粗一點的藍色描邊border:25px solid #3b99e3;
以上效果的全部代碼如下： !DOCTYPE html
html
head
FCK:meta charset="utf-8" /
FCK:meta name ="viewport" content="width=620" /
title Maxthon logo in CSS /title
style
body{margin:0;background:#fff;font-family:"Lucida Grande",Verdana,Arial,sans-serif;font-size:75%;color:#333;text-shadow:0 1px 0 rgba(255,255,255,0.8);}
#content{background:#e5e5e5;padding-bottom:2em;}
#article{width:600px;margin:0 auto;padding:1em;text-align:center;}
#article h1{font-size:1.6em;font-weight:normal;margin:0 0 0.5em 0;}
#article p{margin:0;font-size:1em;line-height:1.5em;}
#article a{text-decoration:none;color:#778899;}
#results{padding:10px 0;border-top:1px solid #ccc;background:white;text-align:center;}
@-webkit-keyframes spaceboots {
0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }
10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }
30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }
40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }
50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }
60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }
70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }
80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }
90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }
100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }
}
.howto:hover,
.howto:focus {
-webkit-animation-name: spaceboots;
-webkit-animation-duration: 0.8s;
-webkit-transform-origin:50% 50%;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.howto {
font-size:12px; margin-left:20px;display:inline-block
}
/** Maxthon ********************/
#maxthon-logo {
width: 250px;
height: 280px;
position: relative;
margin: 0 auto;
}
#maxthon-logo div { position: absolute; }
#maxthon-logo .border{
width: 240px;
height: 240px;
background:#b1e4ff;
border:2px solid #789cb6;
border-radius: 120px;
-moz-border-radius: 120px;
}
#maxthon-logo .border{opacity:0.80;}
#maxthon-logo .border:hover{opacity:1;box-shadow:0 0 15px #fff;-webkit-box-shadow:0 0 15px #fff;-moz-box-shadow:0 0 15px #fff;}
#maxthon-logo .circle{
width: 230px;
height: 230px;
top:5px;
left:5px;
border-radius: 115px;
-moz-border-radius: 115px;
background:#3b99e3;
}
#maxthon-logo .m{
width: 150px;
height: 100px;
top:70px;
left:42px;
background:#ffffff;
border-radius: 3px 20px 3px 3px;
-moz-border-radius: 3px 20px 3px 3px;
}
#maxthon-logo .fix-m{
width: 35px;
height: 45px;
top:30px;
left:33px;
background:#ffffff;
border:25px solid #3b99e3;
border-bottom:none;
}
/style
/head
body
div id="content"
div id="article"
div id="maxthon-logo"
div
div
div
div /div
/div
/div
/div
/div
h1 The a _fcksavedurl="http://www.maxthon.cn/" rel="nofollow" Maxthon /a logo in CSS. a href="http://ui a _fcksavedurl='http://www.cssk8.com/' u css /u /a .cn/ a _fcksavedurl='http://www.cssk8.com/' u css /u /a 3-logo/" _fcksavedurl="http://uicss.cn/css3-logo/" rel="bookmark" title="Permanent Link to ?css3д?logo" how to? /a /h1
p No images, no canvas, just some CSS. Best viewed in a modern browser. /p
/div
/div
div id="results"
img src="http://uicss.cn/css3/comparison-white.png" _fcksavedurl="http://uicss.cn/css3/comparison-white.png" width="189" height="155" alt="Browser results"
/div
/body
/htmlhtml教程

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

上一篇：DIV+CSS技術適合中國中小網站嗎？

下一篇：詳解DIV+CSS與表格建站的區別