CSS3转动——五颜六色扇子适配firefox访问器

2021-03-10 02:26 jianzhan
看到1网站做了1个五颜六色扇子的视頻实例教程,尼玛还必须10大洋
至此,我有点不爽,这么1点物品或许要钱,我擦啊,因而闲的蛋痒的我,自身去搞了1个
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(⑻0deg);z-index:1;}
.main2{background:#F16729;-moz-transform: rotate(⑺0deg);z-index:2;}
.main3{background:#F89424;-moz-transform: rotate(⑹0deg);z-index:3;}
.main4{background:#FFCF13;-moz-transform: rotate(⑸0deg);z-index:4;}
.main5{background:#FFEA0D;-moz-transform: rotate(⑷0deg);z-index:5;}
.main6{background:#87B11F;-moz-transform: rotate(⑶0deg);z-index:6;}
.main7{background:#008254;-moz-transform: rotate(⑵0deg);z-index:7;}
.main8{background:#3377B6;-moz-transform: rotate(⑴0deg);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(⑼0deg);display:block;font-family:"微软雅黑";color:#fff;font-size:18px;font-weight:bold;text-shadow:0 1px 0 #000;}

出来的实际效果如图
 

申明1下:本事例纯属给自身纪录罢了,忘那些大牛莫喷我啊!!!这个只做了firefox访问器的适配,别的的懒得去搞了,仅有了解基本原理就行了