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中的calc函数浅析
Jul 10 HTML / CSS
通过css3动画和opacity透明度实现呼吸灯效果
Aug 09 HTML / CSS
基于css3实现漂亮便签样式
Mar 18 HTML / CSS
css3中检验表单的required,focus,valid和invalid样式
Feb 21 HTML / CSS
详解CSS3中使用gradient实现渐变效果的方法
Aug 18 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
Jan 31 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
前端H5 Video常见使用场景简介
Aug 21 HTML / CSS
基于CSS制作创意端午节专属加载特效
Jun 01 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 array_map array_multisort 高效处理多维数组排序
2009/06/11 PHP
浅析PHP中Collection 类的设计
2013/06/21 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP中“=&gt;
2019/03/01 PHP
php7性能提升的原因详解
2019/10/13 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
JS显示表格内指定行html代码的方法
2015/03/31 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
实现音乐播放器的代码(html5+css3+jquery)
2015/08/04 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
jquery实现图片上传前本地预览功能
2016/05/10 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
vue使用codemirror的两种用法
2019/08/27 Javascript
vue+element-ui表格封装tag标签使用插槽
2020/06/18 Javascript
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python中的闭包用法实例详解
2015/05/05 Python
浅谈python连续赋值可能引发的错误
2018/11/10 Python
python做接口测试的必要性
2019/11/20 Python
使用遗传算法求二元函数的最小值
2020/02/11 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Python读写Excel表格的方法
2021/03/02 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
详解Canvas事件绑定
2018/06/27 HTML / CSS
NFL欧洲商店(德国):NFL Europe Shop DE
2018/11/03 全球购物
美国综合购物商城:UnbeatableSale.com
2018/11/28 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
美国婴儿和儿童服装购物网站:PatPat
2020/10/01 全球购物
Weblogc domain问题
2014/01/27 面试题
超市周年庆活动方案
2014/08/16 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
高二化学教学反思
2016/02/22 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android