《
CSS3如何制作遨游LOGO》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302332202013.htm
再画一个小圈，width: 230px; height: 230px;border-radius: 115px;
定位，position: relative;top:5px;left:5px,
css3基础教程：详解border color;
填充背景色background:#3b99e3;
给该死的firefox3私有属性-moz-border-radius: 115px;
扔一个大白方块进去width: 150px; height: 100px;background:#ffffff;
定位position: relative;top:70px,
CSS3基础教程：详解background-size;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,
CSS3基础教程：box-shadow属性;
先画一个外框 width: 240px; height: 240px;border-radius: 120px;
填充背风景background:#b1e4ff;
描边border:2px solid #789cb6;
加暗影box-shadow: 5px 5px 7px #999;
给该死的firefox3私有属性-moz-border-radius: 120px;
终极后果图如下：
很有创意的设计，用css3制造漫游阅读器的LOGO，详细方式如下：
首先咱们来看一下实现办法：
,
css3圆角IE的兼容方法; 以上效果的全体代码如下： <!DOCTYPE html>
<html>
<head>
<FCK:meta charset="utf-8" />
<FCK:meta name =",
CSS3和jQuery动态时钟制作过程;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,
css3制作网页实例 点击切换不同的CSS列表;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=",
CSS3入门教程：target伪类简介;content">
<div id="article">
<div id="maxthon-logo">
<div class="border">
<div class="circle">
<div class="m">
<div class="fix-m"><,
CSS3入门教程(9)：RGBA声明;/div>
</div>
</div>
</div>
</div>
<h1>The <a href=" _fcksavedurl=" rel=",
CSS3入门教程(8)：关于透明度;nofollow">Maxthon</a> logo in CSS.<a href=" href='' _fcksavedurl=''><u>css</u></a>.cn/<a href='' _fcksavedurl=''><u>css</u></a>3-logo/" _fcksavedurl=" rel="bookmark" title="Permanent Link to ?css3д?logo" class="howto">how to?</a></h1>
<p>No images, no canvas, just some CSS. Best viewed in a modern browser.</p>
</div>
</div>
<div id="results",
CSS3入门教程(7)：嵌入字体;>
<img src=" _fcksavedurl=" width="189" height="155" alt="Browser results">
</div>
</body>
</html>
Tag：CSS3 遨游 LOGO CSS3 遨游 LOGO
--> [
网站建设之]CSS3如何制作遨游LOGO
(责任编辑：网站建设)
CSS3如何制作遨游LOGO相关文章