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美化表单控件全集
Jun 29 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
canvas线条的属性详解
Mar 27 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
Feb 20 HTML / CSS
Html5让容器充满屏幕高度或自适应剩余高度的布局实现
May 14 HTML / CSS
html中显示特殊符号(附带特殊字符对应表)
Jun 21 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下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP中替换键名的简易方法示例详解
2014/01/07 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
Zend Framework动作助手FlashMessenger用法详解
2016/03/05 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
Javascript面向对象编程
2012/03/18 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
JavaScript DOM 学习总结(五)
2015/11/24 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
2020/10/26 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
2017/09/18 jQuery
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
vue中实现图片和文件上传的示例代码
2018/03/16 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
jQuery利用cookie 实现本地收藏功能(不重复无需多次命名)
2019/11/07 jQuery
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
CentOS 6.X系统下升级Python2.6到Python2.7 的方法
2016/10/12 Python
基于python 字符编码的理解
2017/09/02 Python
Python 12306抢火车票脚本
2018/02/07 Python
Numpy中的mask的使用
2018/07/21 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
浅谈pc和移动端的响应式的使用
2019/01/03 HTML / CSS
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
阿里旅行:飞猪
2017/01/05 全球购物
商学院大学生求职的自我评价
2014/03/12 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
劳动竞赛活动总结
2014/05/05 职场文书
安全施工责任书
2014/08/25 职场文书
python b站视频下载的五种版本
2021/05/27 Python
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android