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 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
Jun 06 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 HTML / CSS
HTML5实现表单自动验证功能实例代码
Jan 11 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
Jun 09 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
H5离线存储Manifest原理及使用
Apr 28 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
德生PL990的分析评价
2021/03/02 无线电
网友原创的PHP模板类代码
2008/09/07 PHP
PHP+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php去除头尾空格的2种方法
2015/03/16 PHP
PHP实现时间日期友好显示实现代码
2019/09/08 PHP
在Laravel中使用MongoDB的方法示例
2019/11/11 PHP
Dom在ajax技术中的作用说明
2010/10/25 Javascript
javascript中如何处理引号编码&amp;#034;
2013/08/15 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
Ionic2开发环境搭建教程
2020/08/20 Javascript
js操作二进制数据方法
2018/03/03 Javascript
vue实现简单的MVVM框架
2018/08/05 Javascript
快速解决select2在bootstrap模态框中下拉框隐藏的问题
2018/08/10 Javascript
在Vue.js中使用TypeScript的方法
2020/03/19 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
俄罗斯达美乐比萨外送服务:Domino’s Pizza
2020/12/18 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
平安工地汇报材料
2014/08/19 职场文书
毕业横幅标语
2014/10/08 职场文书
2014年小学教导处工作总结
2014/12/19 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
Golang 实现获取当前函数名称和文件行号等操作
2021/05/08 Golang