CSS3旋转――彩色扇子兼容firefox浏览器
2013-06-04 17:31
302 查看
看到一网站做了一个彩色扇子的视频教程,尼玛还需要10大洋
至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个
HTML代码
CSS代码
出来的效果如图
![](https://oscdn.geek-share.com/Uploads/Images/Content/2015/2015030197/929349aac4f6708ec160ff59367bd850)
声明一下:本例子纯属给自己记录而已,忘那些大牛莫喷我啊!!!这个只做了firefox浏览器的兼容,其他的懒得去搞了,只有知道原理就好了
至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个
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;}
出来的效果如图
声明一下:本例子纯属给自己记录而已,忘那些大牛莫喷我啊!!!这个只做了firefox浏览器的兼容,其他的懒得去搞了,只有知道原理就好了
相关文章推荐
- CSS3旋转 彩色扇子
- CSS3 应用01 - 文本阴影效果(兼容IE 7-9 Firefox Opera Chrome 等多浏览器)
- 【开发过程问题汇总系列】【JS控制 iframe跳转】兼容 FireFox和IE内核的浏览器
- JS获得鼠标位置(兼容多浏览器ie,firefox)脚本之家修正版
- 兼容多种浏览器的Ctrl+Enter提交--兼容firefox、ie、opera
- (转) IE和FireFox浏览器的兼容问题
- 兼容IE、FireFox等跨浏览器播放背景音乐 html
- 关于CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
- 最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
- CSS3无图片实现华丽折页菜单效果(多浏览器兼容)
- 最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
- 设置主页 收藏网站 兼容 ie firefox 等浏览器
- [JavaScript] 兼容IE、FireFox、Chrome等浏览器的xml处理函数(xml同步/异步加载、xsl转换、selectSingleNode、selectNodes)
- HTML5和CSS3的浏览器兼容列表
- [ZT]最全的CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
- Div+CSS浏览器兼容问题( FireFox IE6 IE7 IE8 IE9)
- js验证控件,兼容 IE、火狐firefox、Opera,android 浏览器