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 相关文章推荐
css图标制作教程制作云图标
Jan 19 HTML / CSS
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
Oct 11 HTML / CSS
使用CSS3实现多列布局与多背景的技巧
Feb 29 HTML / CSS
2分钟教你实现环形/扇形菜单(基础版)
Jan 15 HTML / CSS
详解css3中的伪类before和after常见用法
Nov 17 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
基于HTML5 Canvas:字符串,路径,背景,图片的详解
May 09 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
Html5无刷新修改browser Url的方法
Jan 15 HTML / CSS
实例讲解使用HTML5 Canvas绘制阴影效果的方法
Mar 25 HTML / CSS
详解h5页面在不同ios设备上的问题总结
Mar 01 HTML / CSS
HTML5 背景的显示区域实现
Jul 09 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中如何实现Hook机制
2017/11/14 PHP
php实现数字补零的方法总结
2018/09/12 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
PHP Redis扩展无法加载的问题解决方法
2019/08/22 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
php自动加载代码实例详解
2021/02/26 PHP
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
2014/05/08 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
深入探寻seajs的模块化与加载方式
2015/04/14 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
2015/08/27 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
iframe高度自适应及隐藏滚动条的实例详解
2017/09/29 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
详解vue3.0 diff算法的使用(超详细)
2020/07/01 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
python抓取百度首页的方法
2015/05/19 Python
Python实现识别手写数字 简易图片存储管理系统
2018/01/29 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
Python fileinput模块如何逐行读取多个文件
2020/10/05 Python
如何利用python生成MD5并去重
2020/12/07 Python
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
体育教师自荐信范文
2013/12/16 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
经典洗发水广告词
2014/03/13 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
2015年度学校应急管理工作总结
2015/10/22 职场文书
2016幼儿园教师节新闻稿
2015/11/25 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
JAVA API 实用类 String详解
2021/10/05 Java/Android