animation之时钟案例

作者: 小透明进击战 | 来源:发表于2019-06-27 17:48 被阅读0次

animation之时钟案例
html5-Animation时钟案例
时钟案例
day07(2017 10 11)
路径-时钟案例
《iOS核心动画高级技巧》
CADisPlayLink与RunLoop的那些事
iOS开发-Core Animation (核心动画）
Core Animation之CABasicAnimation
10月总结

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 300px;
            height: 300px;
            margin: 100px auto;
            border: 10px solid #ccc;
            border-radius: 50%;
            position: relative;
        }
        .line {
            width: 8px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 0;
            transform: translate(-50%,0);
            background-color: #ccc;
        }
        .line1,.line4 {
            width: 15px;
        }
        .line2 {
            transform: translate(-50%,0) rotate(30deg);
        }
        .line3 {
            transform: translate(-50%,0) rotate(60deg);
        }
        .line4 {
            transform: translate(-50%,0) rotate(90deg);
        }
        .line5 {
            transform: translate(-50%,0) rotate(120deg);
        }
        .line6 {
            transform: translate(-50%,0) rotate(150deg);
        }
        .cover {
            width: 250px;
            height: 250px;
            background-color: #ffffff;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        .hour,.second,.minute{
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-100%);
        }
        .hour {
            width: 10px;
            height: 50px;
            animation-name: clockAnimation;
            animation-duration: 43200s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: center bottom;
        }
        .minute {
            width: 8px;
            height: 80px;
            background-color: green;
            animation-name: clockAnimation;
            animation-duration: 3600s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform-origin: center bottom;

        }
        .second {
            width: 2px;
            height: 100px;
            background-color: blue;
            animation-name: clockAnimation;
            animation-duration: 60s;
            animation-iteration-count: infinite;
            animation-timing-function: steps(60);
            transform-origin: center bottom;

        }
        .center {
            width: 20px;
            height: 20px;
            background-color: #cccccc;
            border-radius: 50%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
        /*定义关键帧动画*/
        @keyframes clockAnimation {
            from {
                /*因为元素之前就有transform样式，为避免冲突，下面要重新写一遍*/
                transform: translate(-50%,-100%) rotate(0deg);
            }
            to {
                transform: translate(-50%,-100%) rotate(360deg)
            }

        }
    </style>
</head>
<body>
<div class="box">
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div class="cover"></div>
    <div class="hour"></div>
    <div class="minute"></div>
    <div class="second"></div>
    <div class="center"></div>
</div>

</body>
</html>