用css3制作简单的小风车
开发工具与关键技术:DW css3
作者:张华明
撰写时间:2019/1/19
Css3中有着很多有趣的动画,下面跟大家分享一个风车的制作。代码不多,希望你们能够喜欢。
- 首先在最外面用一个div(class=” box”)封装,设置宽高(具体根据自己的意愿),第一个小div里面的img标签放的是一个背景图片(蓝色的)。
2.制作风车的柱子和叶子。
(1)、柱子的制作:用到了border(边框)来实现,z-index让它浮起来。
z-index的主要功能:确保导航层能覆盖其它控件,实现浮动、导航等设计效果。
(2)、叶子的制作:主要是用的position(定位),相对于包裹它的父级元素box1进行定位,设置样式,这里的ye1指的是第一片叶子(白色矩形),a标签用来制作叶子的炳。在这里只列举一个,后面有详细的代码。
3.制作风车的轴。(中间的圆)这个不难,主要是用到了border-radius(圆角),不要忘了宽高要一致哦。
4.效果图如下:
5.详细代码见下方:
<!--html-->
<body>
<div class="box">
<div class="img">
<img src="../images/pr_1.png" alt="">
</div>
<div class="zhu"></div>
<div class="box1">
<div class="ye1">新<a href=""></a></div>
<div class="ye2">乐<a href=""></a></div>
<div class="ye3">快<a href=""></a></div>
<div class="ye4">年<a href=""></a></div>
</div>
<div class="xiaodian"></div>
</div>
</body>
<!--样式部分-->
<style>
*{
padding: 0px;
margin: 0px;
}
.box{
width: 1519px;
height: 700px;
background: #4540AC;
position: relative;
}
.img{
width: 100%;
height: 150px;
position: absolute;
bottom: 0px;
left: 0px;
}
.img img{
width:100%;
height: 150px;
}
.zhu{
height: 500px;
position: absolute;
bottom: 0px;
left: 45%;
z-index: 10;/*--层次--*/
border-top: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 350px solid #F2F9F9;
border-left: 20px solid transparent;
}
.box1{width: 400px;height: 400px;
position: relative;
top: 185px;
left: 33%;
}
.box1:hover{
transform: rotate(3600deg);
transition: 120s linear;
}
.xiaodian{width: 50px;height: 50px;background: #FFFFFF;border-radius: 50%;
position: absolute;
top: 50%;
left: 44.6%;
}
.ye1{
width: 125px;
height: 60px;
position: absolute;
top: 200px;
left: 12px;
background: #F1F0F0;
text-align-last: center;
line-height: 60px;
}
.ye1 a,.ye2 a,.ye3 a,.ye4 a{
display: block;
width: 90px;
height: 9px;
background: #F1F0F0;
position: absolute;
top: 0px;
left: 101px;
}
.ye2{
width: 125px;
height: 60px;
position: absolute;
top: 46px;
left: 113px;
background: #F1F0F0;
transform: rotate(90deg );
text-align-last: center;
line-height: 60px;
}
.ye3{
width: 125px;
height: 60px;
position: absolute;
top: 150px;
left: 268px;
background: #F1F0F0;
transform: rotate(180deg );
text-align-last: center;
line-height: 60px;
}
.ye4{
width: 125px;
height: 60px;
position: absolute;
top: 304px;
left: 164px;
background: #F1F0F0;
transform: rotate(270deg );
text-align-last: center;
line-height: 60px;
}
</style>