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实现3D旋转书本效果
Mar 21 HTML / CSS
表单button的outline在firefox浏览器下的问题
Dec 24 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS3中的content属性使用示例
Jul 20 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
通过一张图教会你CSS3倒影的实现
Sep 26 HTML / CSS
CSS3 实现穿梭星空动画
Nov 13 HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 HTML / CSS
HTML5中5个简单实用的API
Apr 28 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
HTML5 客户端数据库简易使用:IndexedDB
Dec 19 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的面试题集,附我的答案和分析(一)
2006/11/19 PHP
php URL跳转代码 减少外链
2011/06/25 PHP
支持生僻字且自动识别utf-8编码的php汉字转拼音类
2014/06/27 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
jquery 使用点滴函数代码
2011/05/20 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
javascript实现多张图片左右无缝滚动效果
2017/03/22 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
react中的ajax封装实例详解
2017/10/17 Javascript
Vue实现侧边菜单栏手风琴效果实例代码
2018/05/31 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
Vue常见面试题整理【值得收藏】
2018/09/20 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
JS防抖和节流实例解析
2019/09/24 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
[03:17]DOTA2-DPC中国联赛1月29日Recap集锦
2021/03/11 DOTA
讲解Python中运算符使用时的优先级
2015/05/14 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
python redis存入字典序列化存储教程
2020/07/16 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
应用数学自荐书范文
2013/11/24 职场文书
员工工作自我评价
2014/09/26 职场文书
企业开业庆典答谢词
2015/01/20 职场文书
教师党员自我评价范文
2015/03/04 职场文书
员工试用期转正自我评价
2015/03/10 职场文书
退休教师追悼词
2015/06/23 职场文书
新教师2015年度工作总结
2015/07/22 职场文书
利用python做表格数据处理
2021/04/13 Python