要做比较炫酷的页面展示一些动画就免不了啦,最近做的是一个比较简单的表盘+动态指针的效果
本篇重点:
- css3 @keyframes
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@keyframes简单说明
使用@keyframes规则,你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。在动画过程中,可以更改CSS样式的设定多次。
指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。0%是开头动画,100%是当动画完成。
- 指针围绕什么位置转动(即旋转的中心轴)
-webkit-transform-origin:10px 10px;
- 指针停在最后动画完成的位置
animation-fill-mode: both;
以下为完整示例
HTML
<div class="leftData">
<div class="content-data">
<div class="move">
<span>
<span class="zz"></span>
</span>
</div>
</div>
</div>
css
body{
background:linear-gradient(63deg,rgba(13,15,97,1) 0%,rgba(9,9,56,1) 100%);
border:2px solid rgba(23, 29, 112, 1)
}
.leftData div.content-data{
width: 40%;
text-align: center;
left: 0;
right: 0;
margin: auto;
}
.leftData div.content-data div span{
display: block;
color: #fff;
position: relative;
height: 20px;
line-height: 20px;
}
.leftData div.content-data div span:first-child{
background:url("circle.png") no-repeat;/*表盘*/
background-size: 100% 100%;
width:44%;
padding:18% 0 18% 0;
margin-left: 28%;
color: #fff;
font-size: 20px;
}
.leftData div.move span:first-child span{
background: url("needle1.png") no-repeat;/*指针*/
position: absolute;
background-size:90% 90%;
top: 50%;
width: 20px;
height: 10px;
margin: 0;
left: 44%;
-ms-transform-origin:10px 10px;
-webkit-transform-origin:10px 10px;/*指针转动时的中心轴位置*/
}
.leftData div.move span:first-child span{
animation-name:mymove;/*调用动画*/
-webkit-animation-name:mymove;/*调用动画*/
-webkit-animation-duration:1s;/*指针滑动速度*/
animation-fill-mode: both;/*指针停止到最后指到的位置,去掉则返回0*/
}
@keyframes mymove
{
from{/*指针开始时角度*/
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
}
to{/*指针最终角度*/
-webkit-transform: rotate(310deg);
-ms-transform: rotate(310deg);
}
}
最终效果
以上。