css-表盘动态指针

要做比较炫酷的页面展示一些动画就免不了啦，最近做的是一个比较简单的表盘+动态指针的效果

本篇重点：

• 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);
        }
    }

最终效果

image.png

以上。