CSS3旋转——彩色扇子兼容firefox浏览器
CSS3旋转——彩色扇子兼容firefox浏览器
发布时间:2017-01-07 来源:查字典编辑
摘要:看到一网站做了一个彩色扇子的视频教程,尼玛还需要10大洋至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个HT...

看到一网站做了一个彩色扇子的视频教程,尼玛还需要10大洋

至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个

HTML代码

<div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div><span>尜尜制作</span></div>

<span></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;}

出来的效果如图

1

声明一下:本例子纯属给自己记录而已,忘那些大牛莫喷我啊!!!这个只做了firefox浏览器的兼容,其他的懒得去搞了,只有知道原理就好了

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新 Div+Css教程学习
热门 Div+Css教程学习
网页设计子分类