Css Html 大风车
<div style = "height:500px;width:500px;position:static;float:left;">
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="cyna"></div>
</div>
<div class="limb"></div>
</div>
<div style = "height:500px;width:500px;position:static;float:left;">
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="cyna"></div>
</div>
<div class="limb"></div>
</div>
<div style = "height:500px;width:500px;position:static;float:left;">
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="cyna"></div>
</div>
<div class="limb"></div>
</div>
<div style = "height:500px;width:500px;position:static;float:left;">
<div class="wrap">
<div class="red"></div>
<div class="yellow"></div>
<div class="pink"></div>
<div class="cyna"></div>
</div>
<div class="limb"></div>
</div>
<style>
div{ border-radius: 50%;position: absolute; }
.red{
border-top:100px solid red;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid red;
transform:rotate(-45deg);
left:150px;
top:50px;
}
.yellow{
border-top:100px solid yellow;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid yellow;
left:250px;
top:150px;
transform:rotate(45deg);
}
.pink{
border-top:100px solid pink;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid pink;
left:150px;
top:250px;
transform:rotate(135deg);
}
.cyna{
border-top:100px solid cyan;
border-right: 100px solid transparent;
border-bottom: 100px solid transparent;
border-left: 100px solid cyan;
left:50px;
top:150px;
transform:rotate(-135deg);
}
@keyframes run{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
@-webkit-keyframes run{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
.wrap{
width: 500px;
height: 500px;
line-height: 500px;
text-align: center;
border-radius: 0;
position: relative;
margin:0 auto;
animation:run 2s linear infinite;
}
.limb{
width: 10px;
height: 300px;
border-radius: 0;
background-color: #000;
margin: 0 auto;
left: 245px;
top: 0;
margin-top: -250px;
position: static;
z-index: -1;
}
<\style>
Css Html 大风车的更多相关文章
- css3+div画大风车
今天已经礼拜三了,周天小颖家的佩佩就要结婚啦,小颖要去当伴娘了,哈哈哈哈哈哈,想想都觉得乐开了花,不过之前她给我说让我当她伴娘时,我说我要减肥,不然她那么瘦弱,我站旁边就感觉像一个圆滚滚的小皮球,小颖 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS 实现加载动画之六-大风车
这个动画改编自光盘旋转,前几个步骤一样,最后一步不同.光盘旋转的最后一步是外层容器加个圆形的白色边框,多余部分隐藏,这个案例则是在每个旋转的子元素的顶部或底部增加一个三角形的元素,构成风车旋转的角. ...
- HTML5 canvas制作童年的回忆大风车
今天看到一篇CSS3写的大风车http://www.cnblogs.com/yaojaa/archive/2013/01/30/2882521.html,感觉CSS3太神奇了,这在以前用CSS是想都不 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
随机推荐
- 如何使用 Weave 网络?- 每天5分钟玩转 Docker 容器技术(63)
weave 是 Weaveworks 开发的容器网络解决方案.weave 创建的虚拟网络可以将部署在多个主机上的容器连接起来.对容器来说,weave 就像一个巨大的以太网交换机,所有容器都被接入这个交 ...
- 端午总结-有关Mysql的base
前言 目前软件需要加一种数据源mysql,我也是差不多看了mysql挺久的了,把一些心得写下来,方便以后总结. 大体上包括 mysql5.5,5.6,5.7安装的一些不同,支持的windows平台测试 ...
- 利用jmeter+JAVA对RPC的单接口(dubbo接口等)进行性能测试
建立JAVA项目 建立maven项目,加入Jmeter所需要的JAR包依赖. POM.xml 加入如下: <dependency> <groupId>org.apache.j ...
- webSocket浏览器握手不成功(解决)
websocket与服务端握手会报握手不成功的错误解决方法: 首先是服务端首次收到请求要回报给客户端的报文要做处理多的不说,方法敬上: /// <summary> /// 打包请求连接数据 ...
- H5性能测试学习
工欲善其事,必先利其器,在做H5前端性能测试之前,选择合适的工具能让我们的测试工作事半功倍.本文要提到的工具有两类: 一类是抓包工具,如Fiddler.Charles等.这类工具不仅可以抓包,还可以对 ...
- 初识php soap 学习过程中的摘抄,便于后期翻阅
SOAP 简单对象访问协议, webService三要素 , SOAP.WSDL(WebServicesDescriptionLanguage).UDDI(UniversalDescriptionDi ...
- Alpha 版本测试和发布说明
Alpha版本测试报告 一bug汇总 做题时答案是错的.(已修复) 每次生成的题目一样(已经修复) 计时没有显示即倒计时,难度不同的功能没有实现(打算修复) 没有导入试卷和错题功能(不打算修复) 二. ...
- 团队作业4——第一次项目冲刺(Alpha版本)4th day
一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 计时功能已经完成,然后24点的代码如何在游戏界面与界面组件联系上正在进行. 四.困难与问题 1.在安卓框架与java代码的结合 ...
- 201521123054《Java程序设计》第4周总结
1. 本周学习总结 2. 书面作业 注释的应用 使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 面向对象设计(大作业1,非常重要) **2.1 将在网上商城购 ...
- C#中if_else以及for循环的简单理解
if_else语句的语法: if(判断条件) { 执行语句 }else { 执行语句 } 判断条件位true执行if大括号的语句,false执行else大括号的语句. if_else的扩展: 连续判断 ...