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 box-sizing属性
Apr 17 HTML / CSS
css3制作动态进度条以及附加jQuery百分比数字显示
Dec 13 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
CSS3标注引用的出处和来源的方法
Feb 25 HTML / CSS
为你的html5网页添加音效示例
Apr 03 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
HTML5 canvas基本绘图之图形变换
Jun 27 HTML / CSS
a标签下载链接的简单实现
Sep 13 HTML / CSS
解决HTML5中的audio在手机端和微信端的不能自动播放问题
Nov 04 HTML / CSS
Html5定位终极解决方案
Feb 05 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
一个更简单的无限级分类菜单代码
2007/01/16 PHP
php使用session二维数组实例
2014/11/06 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php生成rss类用法实例
2015/04/14 PHP
Yii实现单用户博客系统文章详情页插入评论表单的方法
2015/12/28 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js实现格式化金额,字符,时间的方法
2015/02/26 Javascript
javaScript基础语法介绍
2015/02/28 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
记一次webapck4 配置文件无效的解决历程
2018/09/19 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
pandas 选择某几列的方法
2018/07/03 Python
Python常见数字运算操作实例小结
2019/03/22 Python
python三大神器之fabric使用教程
2019/06/10 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
opencv 阈值分割的具体使用
2020/07/08 Python
浅析css3中matrix函数的使用
2016/06/06 HTML / CSS
商场总经理岗位职责
2014/02/03 职场文书
函授药学自我鉴定
2014/02/07 职场文书
户外婚礼策划方案
2014/02/08 职场文书
白酒市场营销方案
2014/02/25 职场文书
初三开学计划书
2014/04/27 职场文书
航班延误投诉信
2015/07/02 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
我家女友可不止可爱呢 公开OP主题曲无字幕动画MV
2022/04/11 日漫