animationの時計ケース

3745 ワード




    
    
    <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>


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



</code></pre> 
</article>
                            </div>
                        </div>