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与html5实现响应式导航菜单(导航栏)效果分享
Feb 12 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
Nov 16 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述
Jan 31 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 HTML / CSS
详解CSS故障艺术
May 25 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 HTML / CSS
css3带你实现3D转换效果
Feb 24 HTML / CSS
关于CSS自定义属性与前端页面的主题切换问题
Mar 21 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 八种基本的数据类型小结
2011/06/01 PHP
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
兼容多浏览器的字幕特效Marquee的通用js类
2008/07/20 Javascript
js过滤数组重复元素的方法
2010/09/05 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js随机生成网页背景颜色的方法
2015/02/26 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
vue-cli开发时,关于ajax跨域的解决方法(推荐)
2018/02/03 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
基于Python实现文件大小输出
2016/01/11 Python
Python多进程同步简单实现代码
2016/04/27 Python
python实现的多线程端口扫描功能示例
2017/01/21 Python
python GUI实例学习
2017/11/21 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
django自带调试服务器的使用详解
2019/08/29 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
世界上最大的艺术社区:SAA
2020/12/30 全球购物
经理管理专业自荐信范文
2013/12/31 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
消防安全宣传标语
2014/06/07 职场文书
2014年市场部工作总结
2014/11/25 职场文书
大学生入党群众意见书
2015/06/02 职场文书
2016新春团拜会致辞
2015/08/01 职场文书
导游词之丹东鸭绿江
2019/10/24 职场文书
MySQL复制问题的三个参数分析
2021/04/07 MySQL
CentOS7安装GlusterFS集群以及相关配置
2022/04/12 Servers
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python