纯Css构建动感炫酷的Logo标志，Css3代码

发布时间：2018-08-16 21:11:05 所属栏目：专访来源：站长网

导读：纯Css3构建动感炫酷的Logo标志，在 IE8 及以下浏览器只能看到非常普通的效果，如果您想看到动态的效果，请使用 IE9 、火狐、 Chrome 等浏览器，烈火小编在Chrome下演示的效果截图如下：再看运行效果： !doctype htmlhtmlheadmeta http-equiv=content-ty

　　纯Css3构建动感炫酷的Logo标志，在IE8及以下浏览器只能看到非常普通的效果，如果您想看到动态的效果，请使用IE9、火狐、Chrome等浏览器，烈火小编在Chrome下演示的效果截图如下：

　　再看运行效果：

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=gb2312" /> <title>FB - CSS3</title> <style type="text/css" rel="stylesheet"> * { margin:0px; padding:0px;} ::-moz-selection { background:#f50; color: #fff;} ::selection { background:#f50; color: #fff;} html { height:100%; background:#aaa; background:-webkit-gradient(linear,0 0,0 bottom,from(#fff),to(#aaa)); -webkit-transition:25s; -o-transition:25s; -moz-transition:25s;} body { margin:50px auto; cursor:default; color:#333; font-size:12px;} html:hover { background:#9ac5ff; background:-webkit-gradient(linear,0 0,0 bottom,from(#daeaff),to(#9ac5ff)); -webkit-transition:5s; -o-transition:5s; -moz-transition:5s;} div { margin:auto; _overflow:hidden;} .div1 { width:300px; height:300px; border-radius:150px; background:#0064b5; -webkit-box-shadow:0 0 10px #0064b5; -o-box-shadow:0 0 10px #0064b5; -moz-box-shadow:0 0 10px #0064b5; box-shadow:0 0 10px #0064b5; border:5px #e3f1ff solid; background:-webkit-gradient(linear,0 0,0 bottom,from(#4fb8ff),to(#0064b5));} .div2 { width:250px; height:250px; border-radius:125px; position:relative; top:25px; background:#6ec4ff; background:-webkit-gradient(linear,0 0,0 bottom,from(#e3f1ff),to(#6ec4ff));} .div3 { width:200px; height:232px; border-radius:100px 100px 50px 50px; position:relative; top:25px; background:#0569ba; background:-webkit-gradient(linear,0 0,0 bottom,from(#4fb8ff),to(#0569ba));} .div4 { width:75px; height:75px; background:red; position:relative; top:60px; left:-60px; border-radius:150px 0 0 0; -webkit-transform:rotate(315deg); -o-transform:rotate(315deg); -moz-transform:rotate(315deg); -webkit-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; background:#ff3027; background:-webkit-gradient(linear,0 0,0 bottom,from(#ffccca),to(#ff3027));} .div3:hover .div4 { top:-5px; left:0; -webkit-transform:rotate(405deg) scale(1.2,1.2); -o-transform:rotate(405deg) scale(1.2,1.2); -moz-transform:rotate(405deg) scale(1.2,1.2);} .div5 { width:75px; height:75px; background:red; position:relative; top:-14px; left:60px; border-radius:150px 0 0 0; -webkit-transform:rotate(135deg); -o-transform:rotate(135deg); -moz-transform:rotate(135deg); -webkit-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; background:#78ab03; background:-webkit-gradient(linear,0 0,0 bottom,from(#d5f889),to(#78ab03));} .div3:hover .div5 { top:50px; left:0; -webkit-transform:rotate(225deg) scale(1.2,1.2); -o-transform:rotate(225deg) scale(1.2,1.2); -moz-transform:rotate(225deg) scale(1.2,1.2);} .div6 { width:75px; height:75px; background:red; position:relative; top:-150px; left:0px; border-radius:150px 0 0 0; -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -moz-transform:rotate(45deg); -webkit-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; background:#ffb500; background:-webkit-gradient(linear,0 0,0 bottom,from(#fffc00),to(#ffb500));} .div3:hover .div6 { top:-90px; left:-65px; -webkit-transform:rotate(-45deg) scale(1.2,1.2); -o-transform:rotate(-45deg) scale(1.2,1.2); -moz-transform:rotate(-45deg) scale(1.2,1.2);} .div7 { width:75px; height:75px; background:red; position:relative; top:-105px; left:0px; border-radius:150px 0 0 0; -webkit-transform:rotate(225deg); -o-transform:rotate(225deg); -moz-transform:rotate(225deg); -webkit-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; background:#d6d7d7; background:-webkit-gradient(linear,0 0,0 bottom,from(#ffffff),to(#d6d7d7));} .div3:hover .div7 { top:-165px; left:65px; -webkit-transform:rotate(135deg) scale(1.2,1.2); -o-transform:rotate(135deg) scale(1.2,1.2); -moz-transform:rotate(135deg) scale(1.2,1.2);} .title { clear:both; margin:50px auto; padding:25px 0; clear:both; width:300px; font-family:"Impact"; font-weight:normal; border-radius:10px; font-size:28px; color:#0064b5; border:2px #0064b5 solid; text-shadow:0 2px 0 #fff; -webkit-transition:0.5s; -o-transition:0.5s; -moz-transition:0.5s; background:#d6d7d7; background:-webkit-gradient(linear,0 0,0 bottom,from(#ffffff),to(#d6d7d7));} .title:hover { -webkit-transform:rotate(360deg); -o-transform:rotate(360deg); -moz-transform:rotate(360deg); color:#fff; text-shadow:0 2px 0 #0064b5; background:#0064b5; background:-webkit-gradient(linear,0 0,0 bottom,from(#4fb8ff),to(#0064b5));} .title::-moz-selection { background:#0064b5; color:#fff;} .title::selection { background:#0064b5; color:#fff;} </style> </head> <body> <div style="padding:10px;text-align:center;"> <div class="div1"> <div class="div2"> <div class="div3"> <div class="div4"></div> <div class="div5"></div> <div class="div6"></div> <div class="div7"></div> </div> </div> </div> <div class="title">FengBao</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>
提示：可修改后代码再运行!

（编辑：源码门户网）

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