CSS时钟、高级动画

黄良钵

分类: 程序开发 39 0

CSS时钟:

HTML部分:

<body>
    <div id="dot"></div>
    <div id="second">
        <span></span>
    </div>
    <div id="minute">
        <span></span>
    </div>
    <div id="hour">
        <span></span>
    </div>
</body>

CSS部分:

        body{
            height: 100%;
            margin: 0;
            background-image: url(clock.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
        #dot{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #ccc;
            position: absolute;
            top: calc(50% - 30px/2);
            left: calc(50% - 30px/2);
            z-index: 1000;
        }
        #second{
            width: 600px;
            height: 10px;
            /*background-color: red;*/
            position: absolute;
            top: calc(50% - 10px / 2);
            left: calc(50% - 600px / 2);
            animation: rotate 60s linear infinite;            
            z-index: 900;
        }
        #second span{
            width: 350px;
            height: 3px;
            background-color: yellow;
            display: block;
            margin-top: 3.5px;
            border-radius: 1.5px;
        }
        @keyframes rotate{
            from{
                transform: rotate(0);
            }
            to{
                transform: rotate(360deg);
            }
        }
        #minute{
            width: 500px;
            height: 10px;
            /*background-color: red;*/
            position: absolute;
            top: calc(50% - 10px / 2);
            left: calc(50% - 500px / 2);
            animation: rotate 3600s linear infinite;   
            z-index: 800;         
        }
        #minute span{
            width: 280px;
            height: 6px;
            background-color: blue;
            display: block;
            margin-top: 2px;
            border-radius: 3px;
        }
        #hour{
            width: 400px;
            height: 10px;
            /*background-color: red;*/
            position: absolute;
            top: calc(50% - 10px / 2);
            left: calc(50% - 400px / 2);
            animation: rotate 43200s linear infinite;
            z-index: 700;
        }
        #hour span{
            width: 220px;
            height: 10px;
            background-color: red;
            display: block;
            border-radius: 5px;            
        }

高级动画:

HTML部分:

<body>
    <div>
        <span>这是一个跑马灯。。。。。。。。</span>
    </div>
    <section></section>
</body>

CSS部分:

        body{
            margin: 0;
        }
        section{
            width: 300px;
            height: 300px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            animation: move 2s linear;
            
            /*属性规定动画在播放之前或之后,是否可见*/
            /*animation-fill-mode: forwards;*/
            animation-fill-mode: backwards;
            /*animation-fill-mode: both;*/
            animation-delay: -0.5s;

            /*定义属性是否轮流反向播放动画*/
            /*animation-direction: alternate-reverse;*/
            /*animation-direction: alternate;*/
            animation-direction: reverse;
            /*播放次数*/
            animation-iteration-count: 4;
        }
        @keyframes move{
            from{
                left: 100px;
            }
            to{
                left: calc(100% - 100px - 300px);
            }
        }
        div{
            height: 50px;
            width: 100%;
            background-color: blue;
        }
        div span{
            display: block;
            height: 100%;
            width: 600px;
            color: white;
            font-size: 25px;
            font-weight: bold;
            position: absolute;
            animation: move1 5s linear infinite;
        }
        @keyframes move1{
            from{
                left: 100%;
            }
            to{
                left: -100%;
            }
        }

演示效果:(如有打不开,请点击右键在新标签中打开)

CSS时钟

高级动画

  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
CSS时钟、高级动画

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “CSS时钟、高级动画”

Loading...