CSS-3D知识

1.CSS动画

1.1 CSS动画属性-animation

animation：为CSS动画属性，使用该属性可以替代flash等动画效果，使其可以完成关键帧补充等效果。其需要和@keyframes配合使用，以满足动画效果。其余内容可参见：W3C-CSS动画讲解

CSS动画示例代码一

<!-- 示例代码二 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 3D Learn</title>
</head>

<body>
    <div class="div1" onclick="paused()">
        css3 动画
    </div>
    <style>
        body {
            width: 99%;
            height: 100%;
        }

        .div1 {
            margin-top: 25%;
            border-radius: 7px;
            width: 80px;
            height: 50px;
            /* 使div文字居中的方法之一 */
            line-height: 50px;
            text-align: center;
            /* 若想使div移动，则需要设置定位为相对位置 */
            position: relative;
            /* 简写方式 */
            /* animation: test 15s infinite running;
            -webkit-animation: test 15s infinite running; */
            animation-name: test;
            -webkit-animation-name: test;
            /* duration 后面需要加单位s */
            -webkit-animation-duration: 15s;
            animation-duration: 15s;
            animation-iteration-count: infinite;
            animation-play-state: paused;
            animation-timing-function: linear;
            -webkit-animation-play-state: paused;
            background-color: aqua;
        }

        @keyframes test {
            0% {
                left: 0px;

            }

            15% {
                margin-top: 0px;
                left: 300px;
                /* transform: rotate(30deg); */
            }

            50% {
                margin-top: 25%;
                left: calc(100% - 85px);
                /* transform: rotate(30deg); */
                background-color: greenyellow;
            }

            65% {
                margin-top: 50%;
                left: calc(100% - 370px);
                /* transform: rotate(360deg); */
                background-color: bisque;
            }

            100% {
                margin-top: 25%;
                left: 0px;
            }

        }
    </style>
    <script>
        function paused() {
            document.getElementsByClassName("div1")[0].style.animationPlayState = "running";
        }
    </script>
</body>

</html>
posted @ 2021-01-10 11:45  #司南  阅读(120)  评论(0)  编辑  收藏  举报