美文网首页
day09 动画animation

day09 动画animation

作者: yuxiaohu | 来源:发表于2017-09-05 21:43 被阅读0次

    1.动画animation

    1.1 第一种方式

    //CSS
    @keyframes myfirst
    {
        from {background: red;}
        to {background: yellow;}
    }
    

    1.2 第二种方式

    //CSS
    @keyframes myfirst
    {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
    }
    
    div{
     animation:myfirst 2s;
    }
    div{
     animation:myfirst 2s infinite;  //无限循环
    }
    

    2 自己代码如下

    //HTML
    <div></div>
    
    //CSS
    <style>
            div{
                width: 200px;
                height: 300px;
                background-color: pink;
                border-radius: 150px;
                margin: 100px;
            }
            div:hover{
                animation: yxh 3s infinite;  //无限循环 infinite
            }
            @keyframes yxh {
    
                 // 第一种方式
                /*0%{background-color: red;width: 400px;height: 400px}*/
                /*25%{background-color: yellow}*/
                /*50%{background-color: blue}*/
                /*100%{background-color: turquoise}*/
    
                // 第二种方式
                from{
                    background-color: red;
                    transform:rotate(360deg)
                }
                to{
                    background-color: darkblue;
                    height: 500px;
                    width: 900px;
                    border-radius: 450px;
                }
            }
        </style>
    

    相关文章

      网友评论

          本文标题:day09 动画animation

          本文链接:https://www.haomeiwen.com/subject/uuppjxtx.html