要做比較炫酷的頁面展示一些動畫就免不了啦棍辕，最近做的是一個比較簡單的表盤+動態(tài)指針的效果
本篇重點：
- css3 @keyframes
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@keyframes簡單說明
使用@keyframes規(guī)則载萌，你可以創(chuàng)建動畫。創(chuàng)建動畫是通過逐步改變從一個CSS樣式設(shè)定到另一個溪厘。在動畫過程中，可以更改CSS樣式的設(shè)定多次。
指定的變化時發(fā)生時使用％巫员，或關(guān)鍵字"from"和"to"诅挑，這是和0％到100％相同四敞。0％是開頭動畫，100％是當動畫完成拔妥。
- 指針圍繞什么位置轉(zhuǎn)動（即旋轉(zhuǎn)的中心軸）
-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;/*指針轉(zhuǎn)動時的中心軸位置*/
}
.leftData div.move span:first-child span{
animation-name:mymove;/*調(diào)用動畫*/
-webkit-animation-name:mymove;/*調(diào)用動畫*/
-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);
}
}
最終效果
image.png
以上。
