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高级选择器使用方法
Dec 02 HTML / CSS
CSS3动画animation实现云彩向左滚动
May 09 HTML / CSS
CSS3中Animation属性的使用详解
Aug 06 HTML / CSS
基于CSS3实现图片模糊过滤效果
Nov 19 HTML / CSS
CSS3 按钮边框动画的实现
Nov 12 HTML / CSS
详解Html5 Canvas画线有毛边解决方法
Mar 01 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
Jul 18 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
Jan 29 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
canvas简单连线动画的实现代码
Feb 04 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 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
《魔兽争霸3:重制版》更新 多项视觉效果调整
2020/05/04 魔兽争霸
坏狼的PHP学习教程之第2天
2008/06/15 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
CakePHP框架Model关联对象用法分析
2017/08/04 PHP
PHP7.1实现的AES与RSA加密操作示例
2018/06/15 PHP
jquery选择器(常用选择器说明)
2010/09/28 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JavaScript调用客户端Java程序的方法
2015/07/27 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
2016/11/28 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
浅谈vue路径优化之resolve
2017/10/13 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
如何搜索查找并解决Django相关的问题
2014/06/30 Python
Python写的一个定时重跑获取数据库数据
2016/12/28 Python
在Pycharm中自动添加时间日期作者等信息的方法
2019/01/16 Python
使用python3构建文件传输的方法
2019/02/13 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python模拟实现分发扑克牌
2020/04/22 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
用python实现一个简单计算器(完整DEMO)
2020/10/14 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
2018/09/13 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
如何写出好的Java代码
2014/04/25 面试题
化学教育专业求职信
2014/07/08 职场文书
党建工作汇报材料
2014/12/24 职场文书
实习生辞职信范文
2015/03/02 职场文书
创业计划书之川味火锅店
2019/09/02 职场文书
百善孝为先:关于孝道的经典语录
2019/10/18 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
opencv深入浅出了解机器学习和深度学习
2022/03/17 Python
java实现web实时消息推送的七种方案
2022/07/23 Java/Android