css实现风车样式

简介: css实现风车样式
<div class="main">
    <div class="white_circle"></div>
    <div class="fla fla_one">
        <div class="squ squ_one"></div>
        <div class="tri tri_one"></div>
    </div>
    <div class="fla fla_two">
        <div class="squ squ_two"></div>
        <div class="tri tri_two"></div>
    </div>
    <div class="fla fla_three">
        <div class="squ squ_three"></div>
        <div class="tri tri_three"></div>
    </div>
    <div class="fla fla_four">
        <div class="squ squ_four"></div>
        <div class="tri tri_four"></div>
    </div>
</div>
* {
  margin:0;
  padding:0;
}
.main {
  width:804px;
  height:804px;
  animation:roll 3000ms linear infinite;
}
@keyframes roll {
  0% {
  transform:rotate(0deg);
}
100% {
  transform:rotate(-360deg);
}
}.white_circle {
  z-index:99;
  position:absolute;
  width:50px;
  height:50px;
  border-radius:50px;
  background-color:white;
  margin:377px 0 0 377px;
}
.fla {
  position:absolute;
  width:402px;
  height:180px;
}
.fla_one {
  transform:rotate(270deg);
  margin:108px 0px 0px 121px;
}
.fla_two {
  transform:rotate(180deg);
  margin-top:389px;
}
.fla_three {
  transform:rotate(90deg);
  margin:511px 0 0 280px;
}
.fla_four {
  transform:rotate(360deg);
  margin:230px 0 0 402px;
}
.tri {
  width:0;
  height:0;
  border-width:142px;
  border-style:solid;
  border-top-left-radius:109px 122px;
  position:absolute;
  transform:rotate(45deg);
  top:28px;
  left:56px;
}
.tri_one {
  border-color:#F1C40F transparent transparent #F1C40F;
}
.tri_two {
  border-color:#EA4C3C transparent transparent #EA4C3C;
}
.tri_three {
  border-color:#2ECC71 transparent transparent #2ECC71;
}
.tri_four {
  border-color:#1ABC9C transparent transparent #1ABC9C;
}
.squ {
  position:absolute;
  width:271px;
  height:170px;
  border-top-right-radius:98px 68px;
}
.squ_one {
  background-color:#F39C12;
}
.squ_two {
  background-color:#C0392B;
}
.squ_three {
  background-color:#27AE60;
}
.squ_four {
  background-color:#16A085;
}
目录
相关文章
|
1月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
30 0
|
1月前
|
前端开发 JavaScript
css之伪类hover改变自身、子元素、其他元素的样式
css之伪类hover改变自身、子元素、其他元素的样式
27 0
|
1月前
|
前端开发 JavaScript
webpack成长指北第7章---webpack的css\less\scss样式打包
webpack成长指北第7章---webpack的css\less\scss样式打包
41 0
|
8天前
|
前端开发
|
11天前
|
移动开发 前端开发
【通用CSS模板】移动端H5页面统一样式.css
【通用CSS模板】移动端H5页面统一样式.css
|
16天前
|
XML 前端开发 数据格式
css添加样式
【4月更文挑战第4天】css添加样式
20 9
|
1月前
|
JavaScript 前端开发
如何在 Vue 中进行样式绑定和scoped CSS?
如何在 Vue 中进行样式绑定和scoped CSS?
15 0
|
1月前
|
前端开发
uni-app中基于bootstrap的css样式
uni-app中基于bootstrap的css样式
22 0
|
1月前
|
前端开发 开发者
编程笔记 html5&css&js 017 HTML样式
编程笔记 html5&css&js 017 HTML样式
|
2月前
|
前端开发 开发者
深入了解 CSS 伪类:优化页面样式与交互
深入了解 CSS 伪类:优化页面样式与交互
55 2