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 选择器 伪类选择器介绍
Jan 21 HTML / CSS
CSS改变网页中鼠标选中文字背景颜色例子
Apr 23 HTML / CSS
css3实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
利用css3画个同心圆示例代码
Jul 03 HTML / CSS
如何用border-image实现文字气泡边框的示例代码
Jan 21 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
Nov 18 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
el-form每行显示两列底部按钮居中效果的实现
Aug 05 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使用Memcache时模拟命名空间及缓存失效问题的解决
2016/02/27 PHP
thinkphp3.x中display方法及show方法的用法实例
2016/05/19 PHP
PHP的消息通信机制测试实例
2016/11/10 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
Laravel框架学习笔记之批量更新数据功能
2019/05/30 PHP
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
Nodejs进程管理模块forever详解
2014/06/01 NodeJs
vue 注册组件的使用详解
2018/05/05 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
Vue 事件处理操作实例详解
2019/03/05 Javascript
详解Node.js一行命令上传本地文件到服务器
2019/04/22 Javascript
jQuery提示框插件SweetAlert用法分析
2019/08/05 jQuery
vue基于v-charts封装双向条形图的实现代码
2019/12/09 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
Django在Win7下的安装及创建项目hello word简明教程
2014/07/14 Python
python多线程threading.Lock锁用法实例
2014/11/01 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
使用python 写一个静态服务(实战)
2019/06/28 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python能做什么 python的含义
2019/10/12 Python
Python中base64与xml取值结合问题
2019/12/22 Python
Python中用pyinstaller打包时的图标问题及解决方法
2020/02/17 Python
python实现梯度法 python最速下降法
2020/03/24 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Python中的整除和取模实例
2020/06/03 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
自主招生自荐信格式
2013/12/03 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
企业读书活动总结
2014/06/30 职场文书
2014年大班保育员工作总结
2014/12/02 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
使用Ajax实现无刷新上传文件
2022/04/12 Javascript
python画条形图的具体代码
2022/04/20 Python