今天小编跟大家讲解下有关CSS3 绘制BMW logo实的现代码 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3 绘制BMW logo实的现代码 的相关资料，希望小伙伴们看了有所帮助。
火热的移动互联网让我看到了HTML5 CSS3的伟大前景。
虽然web端对CSS3的支持还有很多兼容性问题 但是我很愿意相信web端越来越富了 越来越生动了。
这是我对他们的学习越来越有兴趣了。
下面是我用CSS3绘制的一个BMW的标志。
浏览器支持：chrome safari firefox---------------版本越高越支持
运行截图：
代码：复制代码代码如下:<!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); -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>
来源：爱蒂网
