您當前位置：首頁 > web前端 > 特效 > CSS3特效：純CSS打造“知美”網站LOGO效果

CSS3特效：純CSS打造“知美”網站LOGO效果

來源：程序員人生發布時間：2014-04-29 22:12:37 閱讀次數：3994次

　　這是一款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.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></div>
提示：可修改后代碼再運行!

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 統籌策劃經營是網站立于不敗之地的法寶

下一篇 淺談網絡營銷：如何有效的進行郵件營銷

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

CSS3特效：純CSS打造“知美”網站LOGO效果