zoukankan      html  css  js  c++  java
  • 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 {
                 99%;
                height: 100%;
            }
    
            .div1 {
                margin-top: 25%;
                border-radius: 7px;
                 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>
    
    
    谁不是孤身一人,翻山越岭
  • 相关阅读:
    HDU 1114 Piggy-Bank
    HDU 2955 Robberies
    NTOJ 290 动物统计(加强版)
    POJ 3624 Charm Bracelet
    HDU 2602 Bone Collector
    POJ 1523 SPF(无向图割顶)
    HDU 5311 Hidden String
    HDU 1421 搬寝室
    HDU 1058 Humble Numbers
    POJ 3259 Wormholes(spfa判负环)
  • 原文地址:https://www.cnblogs.com/hasz/p/14257779.html
Copyright © 2011-2022 走看看