css3制作的宝马logo
2013-05-04 17:37
375 查看
<!DOCTYPE html></p> <p> <html><head></p> <p> <script type="text/javascript"> </script> <style type="text/css"> .wrapper { width:365px; height:365px; background: -webkit-gradient(linear, 0 0, 100% 100%, from(#f3f3f3), to(#f3f3f3)); background:-moz-linear-gradient(0 0 0deg,#f3f3f3 0%,#b0b1b5 50%,#f3f3f3 100%); border-radius:365px; border:1px solid #d3d3d3; } .wrapper .wrapper1 { position:relative; border:1px solid #0f0f0f; width:351px; height:351px; margin-top:7px; margin-left:7px; border-radius:351px; background: -webkit-gradient(linear, 0 0, 50% 100%, from(#aaa), to(#000)); background:-moz-linear-gradient(0 0 -60deg,#aaa 0%, #000 100%); box-shadow: #000 0px 0px 1px; } .wrapper .wrapper1 .text { color:#fbfbfb; font-size:72px; font-weight:bold; text-shadow:#000 0px 3px 4px; position:absolute; font-family:Arial, Helvetica, sans-serif; } .wrapper .wrapper1 .text.B { left: 38px; top: 42px; -webkit-transform: rotate(-54deg) scale(1); /*-moz-transform: rotate | scale | skew | translate ; -webkit-transform: rotate | scale | skew | translate ; -o-transform: rotate | scale | skew | translate ; -ms-transform: rotate | scale | skew | translate ; transform: rotate | scale | skew | translate ; */ -webkit-transform: rotate(-54deg) scaleX(1.5); -o-transform: rotate(-54deg) scaleX(1.5); -ms-transform: rotate(-54deg) scaleX(1.5); transform: rotate(-54deg) scaleX(1.5); } .wrapper .wrapper1 .text.M { left: 148px; top: -10px; -webkit-transform:scaleX(1.3); -o-transform:scaleX(1.3); -ms-transform:scaleX(1.3); transform:scaleX(1.3); } .wrapper .wrapper1 .text.W { right: 32px; top: 42px; -webkit-transform: rotate(51deg) scaleX(1.1); -o-transform: rotate(51deg) scaleX(1.1); -ms-transform: rotate(51deg) scaleX(1.1); transform: rotate(51deg) scaleX(1.1); } .wrapper .wrapper1 .wrapper2 { position:relative; width:217px; height:217px; margin-top:62.5px; margin-left:62.5px; background: -webkit-gradient(linear, 100% 100%, 0 0, from(#fff), to(#818181)); background:-moz-linear-gradient(0 0 90deg,#fff 100%, #818181 0%); border:4px solid #000; border-radius:217px; box-shadow: #000 0px 0px 5px; } .wrapper .wrapper1 .wrapper2 .arc1 { position:absolute; width:100px; height:100px; background: -webkit-gradient(linear, 0 0, 100% 100%, from(#bee5ea), to(#2ba4eb)); background:-moz-linear-gradient(0 0 0deg,#bee5ea 0%, #2ba4eb 100%); border-radius:200px 0 0 0; border-right:1px solid #1a91c9; border-bottom:1px solid #1a91c9; border-left:1px solid #d0eaeb; border-top:1px solid #ffffff; box-shadow:#015486 2px 2px 1px; top:3px; left:4px; } .wrapper .wrapper1 .wrapper2 .arc2 { position:absolute; width:100px; height:100px; background: -webkit-gradient(linear, 0 0, 100% 100%, from(#e8e8e8), to(#f5f5f5)); background:-moz-linear-gradient(0 0 0deg,#e8e8e8 0%, #f5f5f5 100%); border-radius:0 0 0 200px; border-top:1px solid #d1ded7; border-right:1px solid #55595c; border-bottom:1px solid #55565a; box-shadow:#282b30 1px 1px 1px; bottom:4px; left:5px; } .wrapper .wrapper1 .wrapper2 .arc3 { position:absolute; width:100px; height:100px; background: -webkit-gradient(linear, 0 0, 100% 100%, from(#44c2e8), to(#0e5c9c)); background:-moz-linear-gradient(0 0 0deg,#44c2e8 0%, #0e5c9c 100%); border-radius:0 0 200px 0; border-left:1px solid #c4eefe; border-top:1px solid #c4eefe; border-right:1px solid #00284b; border-bottom:1px solid #00284b; box-shadow:#015486 1px 1px 2px; bottom:4px; right:4px; } .wrapper .wrapper1 .wrapper2 .arc4 { position:absolute; width:100px; height:100px; background: -webkit-gradient(linear, 0 100%, 100% 0, from(#e8e8e8), to(#f5f5f5)); background:-moz-linear-gradient(0 0 0deg,#e8e8e8 0%, #f5f5f5 100%); border-radius:0 200px 0 0; border-left:1px solid #fffffd; border-right:1px solid #55595c; border-bottom:1px solid #55565a; box-shadow:#282b30 1px 2px 1px; top:5px; right:4px; } </style> </head> <body> <div class="wrapper"> <div class="wrapper1"> <span class="text B">B</span> <span class="text M">M</span> <span class="text W">W</span> <div class="wrapper2"> <div class="arc1"></div> <div class="arc2"></div> <div class="arc3"></div> <div class="arc4"></div> </div> </div> </div> </body></html>
相关文章推荐
- 【CSS3绘画】CSS3制作出来的Opera浏览器Logo
- 利用CSS3来绘制宝马BMW的logo
- 强大css3制作新浪LOGO 胜过PS
- CSS3 圆角制作的消息提示图标
- 用mfc制作程序启动logo
- css3画苹果logo
- 推荐15个国外使用 CSS3 制作的漂亮网站
- css3之animation制作闪烁文字效果
- 网站制作一站式完整版 切图ps DW基础divcss真实案例 HTML5 css3
- 30 个使用 CSS3 制作网页按钮的教程 30 Examples of CSS3 Buttons Tutorials
- 推荐10个 CSS3 制作的创意下拉菜单效果
- CSS3制作三角形
- LOGO在线制作
- CSS3 制作绽放的莲花
- 用css3做html5Logo
- CSS3制作精美的iphone电话图标,不使用图片
- css3使用transform属性制作js弹性运动
- netpbm开机logo制作工作【转】
- css3制作图形大全
- html5+css3制作的播放器,不过还不大完善