您当前位置：首页 > web前端 > 特效 > CSS3特效：纯CSS打造“知美”网站LOGO效果

CSS3特效：纯CSS打造“知美”网站LOGO效果

来源：程序员人生发布时间：2014-04-29 22:12:37 阅读次数：3738次

　　这是一款CSS3特效，使用纯CSS打造“知美”网站LOGO效果，大家都知道css3只有在IE9、火狐和chrome等浏览器下才会有最好的显示效果，因此您如果使用IE8及以下浏览器就不要看了，效果很差的。

　　演示：

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gbk"><title>CSS3实现知美网站Logo效果</title><style type="text/css">.zm-container {width:480px;height:278px;position:relative;}.z-container {width:260px;height:190px;overflow:hidden;position:absolute;left:0;top:0;}.z-1 {background:#6cb;width:87px;height:17px;padding:0 0 18px 25px;border-radius:0 0 0 12px;position:absolute;left:0;top:0;}.z-1:after {content:"";display:block;background:#fff;height:17px;border-radius:0 0 0 6px;}.z-2 {background:#6cb;width:25px;height:72px;position:absolute;left:46px;top:35px;}.z-2:after {content:"";display:block;background:#6cb;width:106px;height:18px;position:absolute;bottom:0;left:-45px;}.z-3 {background:#6cb;width:90px;height:84px;border-radius:0 0 90px 0;position:absolute;left:-20px;top:107px;}.z-3:before {content:"";display:block;background:#fff;width:90px;height:76px;border-radius:0 0 90px 0;position:absolute;left:-25px;top:0;}.z-4 {width:130px;height:130px;border:20px solid #6cb;border-radius:130px;position:absolute;left:88px;top:17px;cursor:pointer;}.z-4:after {content:"";width:80px;height:80px;background:#fff;position:absolute;left:-20px;bottom:-20px;}.z-4 span.dot1,.z-4 span.dot2,.z-4 span.dot3 {width:18px;height:18px;display:block;background:#f86;border-radius:18px;position:absolute;left:23px;top:52px;z-index:1;}.z-4 span.dot2 {left:57px;z-index:3;}.z-4 span.dot3 {left:91px;z-index:3;}.z-4 span.dot1 {animation:changebg1 3s 1000;-moz-animation:changebg1 3s 1000;-webkit-animation:changebg1 3s 1000;}.z-4 span.dot2 {animation:changebg2 3s 1000;-moz-animation:changebg2 3s 1000;-webkit-animation:changebg2 3s 1000;}.z-4 span.dot3 {animation:changebg3 3s 1000;-moz-animation:changebg3 3s 1000;-webkit-animation:changebg3 3s 1000;}.z-4:hover span.dot1 {animation:dotAnimate1 1s 1;-moz-animation:dotAnimate1 1s 1;-webkit-animation:dotAnimate1 1s 1;}.z-4:hover span.dot2 {animation:dotAnimate2 1s 1;-moz-animation:dotAnimate2 1s 1;-webkit-animation:dotAnimate2 1s 1;}.z-4:hover span.dot3 {animation:dotAnimate3 1s 1;-moz-animation:dotAnimate3 1s 1;-webkit-animation:dotAnimate3 1s 1;}@-moz-keyframes changebg1 {0% {background:#6cb;}25% {background:#6cb;}50% {background:#f86;}75% {background:#f86;}100% {background:#f86;}}@-moz-keyframes changebg2 {0% {background:#f86;}25% {background:#f86;}50% {background:#6cb;}75% {background:#f86;}100% {background:#6cb;}}@-moz-keyframes changebg3 {0% {background:#f86;}25% {background:#f86;}50% {background:#f86;}75% {background:#6cb;}100% {background:#f86;}}@-moz-keyframes dotAnimate1 {0% {top:52px;}25% {top:56px;}30% {top:56px;}60% {top:42px;}}@-moz-keyframes dotAnimate2 {0% {top:52px;}25% {top:48px;}30% {top:48px;}60% {top:62px;}}@-moz-keyframes dotAnimate3 {0% {top:52px;}25% {top:56px;}30% {top:56px;}60% {top:42px;}}.z-5 {width:128px;height:80px;overflow:hidden;position:absolute;left:40px;bottom:3px;}.z-5 span {width:220px;height:220px;border:20px solid #6cb;border-radius:220px;display:block;position:absolute;left:0;bottom:0;}.m-container {width:206px;height:190px;position:absolute;top:0;left:275px;}.m-1 {width:35px;height:17px;overflow:hidden;position:absolute;left:34px;top:0;}.m-1:before,.m-2:before {content:"";width:49px;height:85px;background:#6cb;display:block;border-radius:50%;position:absolute;left:0;top:-43px;}.m-1:after,.m-2:after {content:"";width:21px;height:27px;background:#fff;display:block;border-radius:50%;position:absolute;left:28px;top:-10px;}.m-2 {width:35px;height:17px;overflow:hidden;position:absolute;right:34px;top:0;-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);}.m-3 {font-height:0;line-height:0;height:2px;width:70px;background:#6cb;position:absolute;left:68px;top:15px;}.m-4,.m-4:before,.m-4:after {width:206px;height:18px;background:#6cb;display:block;position:absolute;top:17px;left:0;}.m-4:before {content:"";top:34px;}.m-4:after {content:"";top:68px;}.m-5 {width:206px;height:18px;background:#6cb;position:absolute;left:0;top:119px;}.m-5:after {content:"";display:block;background:#6cb;width:26px;height:90px;position:absolute;left:90px;top:-86px;}.m-6 {width:120px;height:53px;overflow:hidden;position:absolute;left:0;bottom:0;}.m-6 span,.m-7 span {background:#6cb;display:block;width:220px;height:180px;border-radius:50%;position:absolute;left:-98px;bottom:0;}.m-6 span:before,.m-7 span:before {content:"";display:block;background:#fff;width:190px;height:138px;border-radius:50%;position:absolute;left:2px;bottom:12px;}.m-7 {width:120px;height:53px;overflow:hidden;position:absolute;right:0;bottom:0;-moz-transform:scaleX(-1);-webkit-transform:scaleX(-1);-o-transform:scaleX(-1);transform:scaleX(-1);}</style></head><body><div class="logo"><div class="zm-container"><div class="z-container"><div class="z-1"></div><div class="z-2"></div><div class="z-3"></div><div class="z-4"><span class="dot1"></span><span class="dot2"></span><span class="dot3"></span></div><div class="z-5"><span></span></div></div><div class="m-container"><div class="m-1"></div><div class="m-2"></div><div class="m-3"></div><div class="m-4"></div><div class="m-5"></div><div class="m-6"><span></span></div><div class="m-7"><span></span></div></div></div></div></body></html><div style="text-align:center;margin:30px 0 0 0;"><hr style="color:#999;height:1px;">如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></div>
提示：可修改后代码再运行!

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 统筹策划经营是网站立于不败之地的法宝

下一篇 浅谈网络营销：如何有效的进行邮件营销

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点