CSS之动画篇
标签： CSS之动画篇 Html/CSS博客 51CTO博客
2023-07-26 18:24:24 185浏览
随着css知识的不断学习，通过之前的内容已经能对页面的静态资源进行比较好的布局设计，本次主要是在为静态页面添加一些美感，让一些资源动态展现。通过本次的动画知识就可以实现一些简单的动态效果了，本次案例以扇叶转动的电风扇为例。效果图如下（由于只能通过截图展示，所以不能直接展示效果，如果想直观的观看，可复制文章末尾的源代码在浏览器上观看）：
首先我们需要进行分层，对每一层逐一实现，这里分为头部即是扇叶所在的圆形部分，中部即是风扇柱部分，尾部即是风扇底座部分。头部部分从外到内，设置一个长宽320px的正方形并设置边框和圆角，让正方形变为圆形，再设置背景颜色为白色，并调用旋转动画，风扇头设置完毕。效果如下：
接下来设置三片扇叶，设置三个宽150px，长40px的矩形设置背景颜色为粉红色和圆角左上角大小40px，使用绝对定位把扇叶移入到水平半径处，并把旋转中心设为为矩形水平最右边，最后使用rotate（）每个扇叶旋转120度。效果如下：
最后头部设置中心logo标志，设置一个长宽30px的正方形并设置边框和圆角为logo盒子变为圆形，设置边框和红色背景，使用绝对定位让盒子居中显示，并设置层级z-index为6让logo盒子在最高层显示，最后让设置文字大小和字体加粗。效果如下：
接下来设计风扇柱，也是设置长400px宽50px的矩形盒子填充背景颜色为黑色，并使用绝对定位把风扇柱定位到风扇头框居中的位置。效果如下：
然后在柱子上设计操作盘，设置长100px宽80px的矩形，并设置背景颜色为蓝色和让矩形左下角和右下角设置为圆角，使用绝对定位定位到风扇柱中上位置。效果如下：
接下来设置操作盘上的数字按钮，同理设置一定大小的盒子，并设置圆角和灰色背景颜色，使用margin: 0 auto让按钮居中显示，使用text-align: center让文字也在圆形中居中显示，在使用box-shadow: 2px 2px 2px gray为按钮添加阴影是效果更加逼真。效果如下：
最后就是底座的制作，比较简单设置一个宽200px高60px的矩形，背景颜色设置为灰色，左上角和右上角设置为圆角，并定位到风扇柱的居中位置。效果如下：
案例参考源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.box {
width: 340px;
height: 1000px;
}
@keyframes ro{
from{transform: rotate(0);}
to{transform: rotate(360deg);}
}
.header {
width: 320px;
height: 320px;
border: 10px solid blue;
border-radius: 50% 50%;
position: relative;
background-color: white;
z-index: 2;
animation: ro 3s linear infinite;
}
.header > div {
width: 150px;
height: 40px;
background-color: pink;
border-radius: 40px 0 0;
position: absolute;
top: 160px;
left: 10px;
transform-origin: 100% 0;
}
.sh1 {
transform: rotate(120deg);
}
.sh2 {
transform: rotate(240deg);
}
.sh3 {
transform: rotate(360deg);
}
#title {
width: 30px;
height: 30px;
border-radius: 50% 50%;
border: 5px solid blue;
background-color: red;
position: absolute;
top: 150px;
left: 150px;
z-index: 6;
}
#title > p {
text-align: center;
line-height: 0px;
font-size: 20px;
font-weight: bolder;
}
.zz {
width: 50px;
height: 400px;
background-color: black;
position: absolute;
top: 180px;
left: 155px;
}
.ca {
position: absolute;
width: 80px;
height: 150px;
background-color: blue;
border-radius: 0 0 40px 40px;
top: 360px;
left: 140px;
}
.ca > div {
width: 20px;
height: 20px;
border-radius: 50% 50%;
background-color: white;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
box-shadow: 2px 2px 2px gray;
}
.dz {
width: 200px;
height: 60px;
background-color: gray;
border-radius: 30px 30px 0 0 ;
position: absolute;
top: 560px;
left: 80px;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<div class="sh1">
</div>
<div class="sh2">
</div>
<div class="sh3">
</div>
</div>
<div id="title">
<p>W</p>
</div>
<div class="zz">
</div>
<div class="ca">
<div class="btn1">
</div>
<div class="btn2">
1
</div>
<div class="btn3">
2
</div>
<div class="btn4">
3
</div>
<div class="btn5">
0
</div>
</div>
<div class="dz">
</div>
</div>
</body>
</html>
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
展开评论
