CSS3 绘制BMW logo实的现代码


Posted in HTML / CSS onApril 25, 2013

火热的移动互联网让我看到了HTML5,CSS3的伟大前景。

虽然web端对CSS3的支持还有很多兼容性问题,但是我很愿意相信web端越来越富了,越来越生动了。 

这是我对他们的学习越来越有兴趣了。

下面是我用CSS3绘制的一个BMW的标志。

浏览器支持:chrome, safari, firefox---------------版本越高越支持

运行截图:

 CSS3 绘制BMW logo实的现代码

代码:

复制代码
代码如下:

<!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>

HTML / CSS 相关文章推荐
CSS3模块的目前的状况分析
Feb 24 HTML / CSS
CSS3 简单又实用的5个属性
Mar 04 HTML / CSS
css3让div随鼠标移动而抖动起来
Feb 10 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
谈一谈HTML5本地存储技术
Mar 02 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
Aug 29 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
Apr 24 #HTML / CSS
Css3+Js制作漂亮时钟(附源码)
Apr 24 #HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
CSS3盒子模型详解
Apr 24 #HTML / CSS
css3闪亮进度条效果实现思路及代码
Apr 17 #HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
Apr 10 #HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 #HTML / CSS
You might like
239军机修复记
2021/03/02 无线电
PHP循环获取GET和POST值的代码
2008/04/09 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
WordPress中用于获取文章信息以及分类链接的函数用法
2015/12/18 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
Javascript自执行匿名函数(function() { })()的原理浅析
2016/05/15 Javascript
JavaScript实现时钟滴答声效果
2017/01/29 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
Python socket实现简单聊天室
2018/04/01 Python
基于numpy中数组元素的切片复制方法
2018/11/15 Python
详解python中的Turtle函数库
2018/11/19 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
Python基于smtplib协议实现发送邮件
2020/06/03 Python
15个Pythonic的代码示例(值得收藏)
2020/10/29 Python
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
linux面试题参考答案(4)
2014/09/21 面试题
怎样声明一个匿名的内部类
2016/06/01 面试题
酒店执行总经理岗位职责
2013/12/15 职场文书
酒店办公室文员岗位职责
2013/12/18 职场文书
基层干部十八大感言
2014/01/19 职场文书
旅游网创业计划书
2014/01/31 职场文书
委托书的格式
2014/08/01 职场文书
2015年机械设备管理工作总结
2015/05/04 职场文书
忠犬八公的故事观后感
2015/06/05 职场文书
生日寿星公答谢词
2015/09/29 职场文书
学习心理学心得体会
2016/01/22 职场文书
导游词之峨眉乐山/兵马俑/北京故宫御花园
2019/09/03 职场文书
导游词之太原天龙山
2020/01/02 职场文书
nginx location优先级的深入讲解
2021/03/31 Servers
浅谈Redis中的RDB快照
2021/06/29 Redis