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 translate完美实现表头固定效果
Feb 28 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3 transform的skew属性值图文详解
Jul 21 HTML / CSS
CSS3 mask 遮罩的具体使用方法
Nov 03 HTML / CSS
Html5实现如何在两个div元素之间拖放图像
Mar 29 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
详解如何在登录过期后跳出Ifram框架
Sep 10 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 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
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
PHP中的Trait 特性及作用
2016/04/03 PHP
php解决DOM乱码的方法示例代码
2016/11/20 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
基于datagrid框架的查询
2013/04/08 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
BootStrap fileinput.js文件上传组件实例代码
2017/02/20 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
python中列表元素连接方法join用法实例
2015/04/07 Python
Python算法应用实战之队列详解
2017/02/04 Python
Python中音频处理库pydub的使用教程
2017/06/07 Python
Python退火算法在高次方程的应用
2018/07/26 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
委托与事件是什么关系?为什么要使用委托
2014/04/18 面试题
小学音乐教学反思
2014/02/05 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
班级文化建设标语
2014/06/23 职场文书
2014公司年终工作总结
2014/12/19 职场文书
党员示范岗材料
2014/12/19 职场文书
老龙头导游词
2015/02/11 职场文书
技术入股合作协议书
2016/03/21 职场文书
一个成功的互联网创业项目,必须满足这些要求
2019/08/23 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
详解Python中的for循环
2022/04/30 Python