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

发布时间：2018-08-16 14:48:15 所属栏目：专访来源：站长网

导读：这是一款CSS3特效，使用纯CSS打造知美网站LOGO效果，大家都知道css3只有在 IE9 、火狐和chrome等浏览器下才会有最好的显示效果，因此您如果使用 IE8 及以下浏览器就不要看了，效果很差的。演示： !DOCTYPE HTMLhtmlheadmeta http-equiv=Content-Type cont

　　这是一款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.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></div>
提示：可修改后代码再运行!

（编辑：淮安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!