CSS3旋转 彩色扇子
看到一网站做了一个彩色扇子的视频教程,尼玛还需要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;}
出来的效果如图
声明一下:本例子纯属给自己记录而已,忘那些大牛莫喷我啊!!!这个只做了firefox浏览器的兼容,其他的懒得去搞了,只有知道原理就好了
CSS3旋转 彩色扇子相关推荐
- 可控制转速CSS3旋转风车特效
以前制作网页动画一般使用javascript,现在已经有越来越多动动画使用纯CSS实现,并且动画的控制也可以使用CSS3实现,因为CSS 3来了,CSS 3的动画功能确实强大.以下是一个纯CSS3制作 ...
- css3缓慢出现,让CSS3旋转开始缓慢然后结束缓慢?
这不是一个可以通过使用ease-in解决的问题.让CSS3旋转开始缓慢然后结束缓慢? 如果我有一个元素,我想在CSS3中旋转一段时间,但是开始慢,结束速度慢,我该怎么做? CSS @-webkit-k ...
- Css3模拟彩色灯光
Css3模拟彩色灯光 开发工具与关键技术:DW前端 作者:盘子 撰写时间:2019年2月18日 下面来分享下一个简单而又好看的彩色灯光样式,源代码部分,见如下截图: 源代码部分所敲的代码很简洁,从此处 ...
- html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则
网页中的动画通常是当鼠标移到上面,动画立即停止,便于用户阅读:CSS3新增的制作动画属性也考虑到这个问题,只要作了相应的设置,鼠标移到上面,动画也会停止,移开鼠标,动画继续运动:这主要通过animat ...
- 炫酷的动画特效—css3旋转立方球体
炫酷的动画特效-css3旋转立方球体 想要实现旋转立方球体特效,以下的内容你不容错过. 要理解的知识点 形成一个3D空间: transform-style:preserve-3d (让父元素形成3D, ...
- css3旋转带放大缩小效果
下载地址 css3旋转带放大缩小效果,鼠标悬停的时候触发放大或缩小并旋转的动画. dd:
- safari浏览器兼容css3旋转同时位移处理
safari浏览器兼容css3旋转同时位移处理 项目某元素同时执行 位移+旋转时,谷歌浏览器等其他浏览器正常,safari浏览器不兼容(pc和苹果手机一样) 网络方案 (一) (亲测 然并卵 ~~) ...
- CSS3旋转实例学习
CSS3旋转实例学习(附3D旋转实例) 我们都有在网页上见过一些交互性的效果,比如用鼠标滑向图标或是按钮的时候,图标会自动旋转一周,这就是CSS3旋转效果.在CSS3中有个常见的transform应用 ...
- HTML页面多个平行四边形,用css3旋转写平行四边形
今天要布局的网页背景是一个平行四边形,切图作为背景不好,很影响网页的打开速度,,那么这个平行四边形就css代码写出来,可以用css3的CSS3 transform 旋转的属性写出来,就是transfo ...
最新文章
- 认房又认贷 政策的真正意图——限购令如果没有同时增加土地供应,只是在变相加剧未来房价的上涨...
- LeetCode Count Primes
- java中demo接人_return的用法_如何理解java中return的用法?
- [渝粤题库]西北工业大学复变函数与积分变换
- 如何对手机使用adb
- 自定义sql_基于Calcite自定义SQL解析器
- java long类型6_Java学习6——基本数据类型及其转换
- 如何做软件需求分析(个人工作经验总结)
- 163企业邮箱 端口服务器,163企业邮箱端口
- 数学魔鬼表达式——第三天
- vmware fusion 7 序列号
- 编译原理入门(一):GNU编辑器(GCC)原理简介
- 知道为什么HTML页面在电脑上和手机上的布局不同吗?这篇文章带你走进Element UI的简单适配
- C#源码大型ERP系统企业管理 CS框架源码 进销存 二次开
- 测试iphone硬件好坏的软件,iPhone手机如何检测硬件故障,硬件检测必备技能,建议了解一下...
- 【源码】量子计算机模拟器
- html使用JQ调用移动端端相册功能的实现
- 找不到 blog.csdn.net 的服务器 DNS 地址
- android设置头像同时设置模糊背景
- 《 2021大学生就业分析报告 》