CSS3旋转——彩色扇子兼容firefox浏览器
网站建设 2023-01-28 20:49www.1681989.com免费网站
看到一网站做了一个彩色扇子的视频教程,尼玛还需要10大洋
至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个
HTML代码
<div class="ma">
<div class="ma1"></div>
<div class="ma2"></div>
<div class="ma3"></div>
<div class="ma4"></div>
<div class="ma5"></div>
<div class="ma6"></div>
<div class="ma7"></div>
<div class="ma8"></div>
<div class="ma9"></div>
<div class="ma10"></div>
<div class="ma11"></div>
<div class="ma12"></div>
<div class="ma13"></div>
<div class="ma14"></div>
<div class="ma15"></div>
<div class="ma16"></div>
<div class="ma17"><span>尜尜制作</span></div>
<span class="ma18"></span>
</div>
CSS代码
.ma{width:800px;position:relative;height:500px;:50%;left:50%;marg-:200px;}
.ma div{width:80px;height:400px;position:absolute;:0;left:0;border-radius:10px;-moz-transform-orig:25px 360px;}
.ma1{background:#DB3535;-moz-transform: rotate(-80deg);z-dex:1;}
.ma2{background:#F16729;-moz-transform: rotate(-70deg);z-dex:2;}
.ma3{background:#F89424;-moz-transform: rotate(-60deg);z-dex:3;}
.ma4{background:#FFCF13;-moz-transform: rotate(-50deg);z-dex:4;}
.ma5{background:#FFEA0D;-moz-transform: rotate(-40deg);z-dex:5;}
.ma6{background:#87B11F;-moz-transform: rotate(-30deg);z-dex:6;}
.ma7{background:#008254;-moz-transform: rotate(-20deg);z-dex:7;}
.ma8{background:#3377B6;-moz-transform: rotate(-10deg);z-dex:8;}
.ma9{background:#4C549F;-moz-transform: rotate(0deg);z-dex:9;}
.ma10{background:#774395;-moz-transform: rotate(10deg);z-dex:10;}
.ma11{background:#CA0C86;-moz-transform: rotate(20deg);z-dex:11;}
.ma12{background:#FCF27E;-moz-transform: rotate(30deg);z-dex:12;}
.ma13{background:#FFEA0D;-moz-transform: rotate(40deg);z-dex:13;}
.ma14{background:#FFCF13;-moz-transform: rotate(50deg);z-dex:14;}
.ma15{background:#F89424;-moz-transform: rotate(60deg);z-dex:15;}
.ma16{background:#F16729;-moz-transform: rotate(70deg);z-dex:16;}
.ma17{background:#DB3535;-moz-transform: rotate(80deg);z-dex:17;-moz-text-transform: rotate(80deg);text-align:center;le-height:400px;}
.ma18{display:block;position:absolute;:355px;left:0px;width:20px;height:20px;background:#c;border-radius:10px;z-dex:18;}
.ma17 span{-moz-transform: rotate(-90deg);display:block;font-family:"微软雅黑";color:#fff;font-size:18px;font-weight:bold;text-shadow:0 1px 0 #000;}
出来的效果如图
声明一下本例子纯属给自己记录而已,忘那些大牛莫喷我啊!!!这个只做了firefox浏览器的兼容,其他的懒得去搞了,只有知道原理就好了
至此,我有点不爽,这么一点东西也许要钱,我擦啊,于是闲的蛋痒的我,自己去搞了一个
HTML代码
复制代码
代码如下:<div class="ma">
<div class="ma1"></div>
<div class="ma2"></div>
<div class="ma3"></div>
<div class="ma4"></div>
<div class="ma5"></div>
<div class="ma6"></div>
<div class="ma7"></div>
<div class="ma8"></div>
<div class="ma9"></div>
<div class="ma10"></div>
<div class="ma11"></div>
<div class="ma12"></div>
<div class="ma13"></div>
<div class="ma14"></div>
<div class="ma15"></div>
<div class="ma16"></div>
<div class="ma17"><span>尜尜制作</span></div>
<span class="ma18"></span>
</div>
CSS代码
复制代码
代码如下:.ma{width:800px;position:relative;height:500px;:50%;left:50%;marg-:200px;}
.ma div{width:80px;height:400px;position:absolute;:0;left:0;border-radius:10px;-moz-transform-orig:25px 360px;}
.ma1{background:#DB3535;-moz-transform: rotate(-80deg);z-dex:1;}
.ma2{background:#F16729;-moz-transform: rotate(-70deg);z-dex:2;}
.ma3{background:#F89424;-moz-transform: rotate(-60deg);z-dex:3;}
.ma4{background:#FFCF13;-moz-transform: rotate(-50deg);z-dex:4;}
.ma5{background:#FFEA0D;-moz-transform: rotate(-40deg);z-dex:5;}
.ma6{background:#87B11F;-moz-transform: rotate(-30deg);z-dex:6;}
.ma7{background:#008254;-moz-transform: rotate(-20deg);z-dex:7;}
.ma8{background:#3377B6;-moz-transform: rotate(-10deg);z-dex:8;}
.ma9{background:#4C549F;-moz-transform: rotate(0deg);z-dex:9;}
.ma10{background:#774395;-moz-transform: rotate(10deg);z-dex:10;}
.ma11{background:#CA0C86;-moz-transform: rotate(20deg);z-dex:11;}
.ma12{background:#FCF27E;-moz-transform: rotate(30deg);z-dex:12;}
.ma13{background:#FFEA0D;-moz-transform: rotate(40deg);z-dex:13;}
.ma14{background:#FFCF13;-moz-transform: rotate(50deg);z-dex:14;}
.ma15{background:#F89424;-moz-transform: rotate(60deg);z-dex:15;}
.ma16{background:#F16729;-moz-transform: rotate(70deg);z-dex:16;}
.ma17{background:#DB3535;-moz-transform: rotate(80deg);z-dex:17;-moz-text-transform: rotate(80deg);text-align:center;le-height:400px;}
.ma18{display:block;position:absolute;:355px;left:0px;width:20px;height:20px;background:#c;border-radius:10px;z-dex:18;}
.ma17 span{-moz-transform: rotate(-90deg);display:block;font-family:"微软雅黑";color:#fff;font-size:18px;font-weight:bold;text-shadow:0 1px 0 #000;}
出来的效果如图
声明一下本例子纯属给自己记录而已,忘那些大牛莫喷我啊!!!这个只做了firefox浏览器的兼容,其他的懒得去搞了,只有知道原理就好了