C3动画钟表小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*盘*/
        #clock{
            width: 400px;
            height: 400px;
            /*设置为圆*/
            border-radius: 50%;
            margin: 50px auto;
            /*分   秒  相对表的定位*/
            position: relative;
        }

        /*分针*/
        #minute{
            width: 10px;
            height: 102px;
            border-radius: 2px;
            background: #000;
            position: absolute;
            top: 106px;
            left: 201px;
            /*转换原点*/
            transform-origin: bottom;
            /*调用动画  infinite无线播放次数  linear匀速*/
            -webkit-animation:runClock 3600s linear 0s infinite;
        }

        /*秒针*/
        #second{
            width: 6px;
            height: 140px;
            border-radius: 2px;
            background: #9c9c9c;
            position: absolute;
            top: 67px;
            left: 203px;
            /*转换原点*/
            transform-origin: bottom;
            /*调用动画  infinite无线播放次数  linear匀速*/
            -webkit-animation:runClock 60s linear 0s infinite;
        }

        /*声明动画*/
        @-webkit-keyframes runClock {
            /*动画开始的样式*/
            from{
                /*旋转  负值是顺时针  正值是逆时针*/
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
<!--钟表大背景-->
<div id="clock">
    <!--图片-->
    <img width="400px" height="400px" src="img/piii.jpg" alt="">
    <!--分针-->
    <div id="minute"></div>
    <!--秒针-->
    <div id="second"></div>
</div>
</body>
</html>
C3动画钟表小案例

效果图：

猜你喜欢
