CSS3 绘制BMW logo实的现代码

所属分类: 网页制作 / CSS 阅读数: 1175
收藏 0 赞 0 分享

火热的移动互联网让我看到了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);
/*-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>

更多精彩内容其他人还在看

CSS入门教程:计算CSS盒模型宽和高

 出处:当我们布局一个网页的时候,经常会遇到这样的一种情况,那就是最终网页成型的宽度或是高度会超出我们预先的计算,其实就就是所谓的CSS的盒模型造成的。 #test{margin:10px;padding:10px;width:100px;height:100px;}
收藏 0 赞 0 分享

在IE流览器中正确显示PNG透明图片

  png图片有很好的品质。阴影效果也不会有杂边,很流畅。如果插入网页的话可以给网站内容增色不少!更重要的是在不增加图片容量大小的情况下提高了页面的图片的质量。对于有复杂背景,如:在有颜色过度背景上插入不规则边框的图片带来极大很便利!   但目前IE中对于插入
收藏 0 赞 0 分享

CSS教程:DIV底部放置文字

  css对文字的布局上没有靠容器底部对齐的参数,目前使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近的距离还可以精确到像素,自己可以调节,是不是很不错呢?
收藏 0 赞 0 分享

如何用CSS让文字居于div的底部

  这个问题是别人提出的,因为css对文字的布局上没有靠容器底部对齐的参数,(或许有但是我没有发现)不过目前我使用的一个不错的方法也比较好.就是用position属性来解决,看下面的代码,我用position的相对和绝对定位功能也轻松的实现了,文字靠近div低部对齐,并且靠近
收藏 0 赞 0 分享

从A页面连接到B页面后并直接把B页面的隐藏层显示

  这个效果实现的是,在B页面里有两个层,一个显示层,我们暂定名c层,一个是隐藏层,我们暂定名d层,单独进B页面的时候,c层显示,d层隐藏,然而从A页面连接到B页面的时候,则是让d层显示,c层隐藏,我觉得这个效果对网页设计者以后会有很大帮助,现在把代码发出来,
收藏 0 赞 0 分享

CSS样式表定义标签li前面样式

定义LI前面的小点样式 view plaincopy to clipboardprint? 语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lowe
收藏 0 赞 0 分享

符合标准的div css制作的弹出菜单

本文介绍了五款符合标准的div css制作的弹出菜单,而且不含有js的. NO.1最基本的:二级dropdown弹出菜单 <!DOCTYPE html PUB
收藏 0 赞 0 分享

CSS实现在文章每段后面加入带连接的隐藏文字

代码主要理解3个参数:createElement、createTextNode、appendChild。这3个js参数分别是创建元素、创建字符、追加节点。代码原理:循环页面段落标签<p>,创建连接元素<a>,创建要显示的连接字符,用SetAttribute
收藏 0 赞 0 分享

CSS:浏览器特定选择器介绍

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时,这些选择器很有用。 IE6以下 *html{} IE 7 以下 *:first-child html {} * html {} 只对IE 7 *:first-child html {} 只对IE 7
收藏 0 赞 0 分享

WEB标准学习,认识两种网页声明的含义

即网页标准推出来以后,我们时常会看到两种不同的网页的声明,一个是Dhtml,一个是Xhtml。如下所示: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht
收藏 0 赞 0 分享
查看更多