美文网首页
Css3 中运动与 js运动4 作比较

Css3 中运动与 js运动4 作比较

作者: maomizone | 来源:发表于2017-03-20 10:21 被阅读0次

    之前用js写了对象的运动,改变其高度,宽度,字号,透明度,但是缺点是同时只能进行一种运动,今天用css3的过渡来实现。

    js运动4 缓冲运动的共通框架

    CSS3 过渡

    缺点:兼容性一般
    优点:可以同时对一个对象改变其高度等,更加灵活,不容易出错,可以运动的更多,像边框也可以

    QQ图片20170320103009.png

    HTML

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>css过渡</title>
        <style>
            body{
                background-color: #cccccc;
            }
            div{
                width: 100px;
                height: 100px;
                background-color: crimson;
                border: 2px solid white;
                margin: 10px;
                float: left;
                color: white;
                text-align: center;
                line-height: 100px;
                font-size: 15px;
                opacity: 0.3;
            }
    
            div{
                transition:  all 1.5s ease;
                -webkit-transition:  all 1.5s ease;
                -o-transition:  all 1.5s ease;
                -moz-transition:  all 1.5s ease;
            }
            div:hover{
                width:200px;
                height: 250px;
                opacity: 1;
                font-size: 30px;
                border: 10px solid black;
            }
        </style>
    </head>
    <body>
    <div>同时</div>
    
    </body>
    </html>
    

    效果

    cssSport1.gif

    相关文章

      网友评论

          本文标题:Css3 中运动与 js运动4 作比较

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