CSS3旋转——彩色扇子兼容firefox浏览器


Posted in HTML / CSS onJune 04, 2013

看到一网站做了一个彩色扇子的视频教程,尼玛还需要10大洋
至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个
HTML代码

复制代码
代码如下:

<div class="main">
<div class="main1"></div>
<div class="main2"></div>
<div class="main3"></div>
<div class="main4"></div>
<div class="main5"></div>
<div class="main6"></div>
<div class="main7"></div>
<div class="main8"></div>
<div class="main9"></div>
<div class="main10"></div>
<div class="main11"></div>
<div class="main12"></div>
<div class="main13"></div>
<div class="main14"></div>
<div class="main15"></div>
<div class="main16"></div>
<div class="main17"><span>尜尜制作</span></div>
<span class="main18"></span>
</div>

CSS代码
复制代码
代码如下:

.main{width:800px;position:relative;height:500px;top:50%;left:50%;margin-top:200px;}
.main div{width:80px;height:400px;position:absolute;top:0;left:0;border-radius:10px;-moz-transform-origin:25px 360px;}
.main1{background:#DB3535;-moz-transform: rotate(-80deg);z-index:1;}
.main2{background:#F16729;-moz-transform: rotate(-70deg);z-index:2;}
.main3{background:#F89424;-moz-transform: rotate(-60deg);z-index:3;}
.main4{background:#FFCF13;-moz-transform: rotate(-50deg);z-index:4;}
.main5{background:#FFEA0D;-moz-transform: rotate(-40deg);z-index:5;}
.main6{background:#87B11F;-moz-transform: rotate(-30deg);z-index:6;}
.main7{background:#008254;-moz-transform: rotate(-20deg);z-index:7;}
.main8{background:#3377B6;-moz-transform: rotate(-10deg);z-index:8;}
.main9{background:#4C549F;-moz-transform: rotate(0deg);z-index:9;}
.main10{background:#774395;-moz-transform: rotate(10deg);z-index:10;}
.main11{background:#CA0C86;-moz-transform: rotate(20deg);z-index:11;}
.main12{background:#FCF27E;-moz-transform: rotate(30deg);z-index:12;}
.main13{background:#FFEA0D;-moz-transform: rotate(40deg);z-index:13;}
.main14{background:#FFCF13;-moz-transform: rotate(50deg);z-index:14;}
.main15{background:#F89424;-moz-transform: rotate(60deg);z-index:15;}
.main16{background:#F16729;-moz-transform: rotate(70deg);z-index:16;}
.main17{background:#DB3535;-moz-transform: rotate(80deg);z-index:17;-moz-text-transform: rotate(80deg);text-align:center;line-height:400px;}
.main18{display:block;position:absolute;top:355px;left:0px;width:20px;height:20px;background:#ccc;border-radius:10px;z-index:18;}
.main17 span{-moz-transform: rotate(-90deg);display:block;font-family:"微软雅黑";color:#fff;font-size:18px;font-weight:bold;text-shadow:0 1px 0 #000;}

出来的效果如图
CSS3旋转——彩色扇子兼容firefox浏览器 

声明一下:本例子纯属给自己记录而已,忘那些大牛莫喷我啊!!!这个只做了firefox浏览器的兼容,其他的懒得去搞了,只有知道原理就好了

HTML / CSS 相关文章推荐
CSS3样式linear-gradient的使用实例
Jan 16 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
web页面录屏实现
Feb 12 HTML / CSS
html5+css3实现一款注册表单实例
Apr 17 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 HTML / CSS
html5使用canvas压缩图片的示例代码
Sep 11 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
Sep 15 HTML / CSS
Html分层的box-shadow效果的示例代码
Mar 30 HTML / CSS
HTML中的表单元素介绍
Feb 28 HTML / CSS
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
Jun 03 #HTML / CSS
css3弹性盒模型实例介绍
May 27 #HTML / CSS
深入CSS3 动画效果的总结详解
May 09 #HTML / CSS
基于CSS3特效之动画:animation的应用
May 09 #HTML / CSS
纯CSS3实现手风琴风格菜单具体步骤
May 06 #HTML / CSS
CSS3——齿轮转动关键代码
May 02 #HTML / CSS
如何利用CSS3制作3D效果文字具体实现样式
May 02 #HTML / CSS
You might like
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
PHP yield关键字功能与用法分析
2019/01/03 PHP
javascript 火狐(firefox)不显示本地图片问题解决
2008/07/05 Javascript
用JavaScript编写COM组件的步骤
2009/03/17 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
jquery实现div阴影效果示例代码
2013/09/16 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
js 作用域和变量详解
2017/02/16 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
2017/03/14 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
Angular简单验证功能示例
2017/12/22 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
Python中定时任务框架APScheduler的快速入门指南
2017/07/06 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
python实现dijkstra最短路由算法
2019/01/17 Python
Python 将 QQ 好友头像生成祝福语的实现代码
2020/05/03 Python
Django Admin后台模型列表页面如何添加自定义操作按钮
2020/11/11 Python
如何基于Python pygame实现动画跑马灯
2020/11/18 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
为世界各地的女性设计和生产时尚服装:ROMWE
2016/09/17 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
销售找工作求职信
2013/12/20 职场文书
客户服务经理岗位职责
2014/01/29 职场文书
优良学风班总结材料
2014/02/08 职场文书
工伤赔偿协议书
2014/04/15 职场文书
家长建议怎么写
2014/05/15 职场文书
祖国在我心中演讲稿200字
2014/08/28 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
房屋登记授权委托书范本
2014/10/09 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python