美文网首页
5.12 (案例) width

5.12 (案例) width

作者: 柒月柒日晴7 | 来源:发表于2017-06-08 01:37 被阅读0次
    width.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>skew</title>
        <style type="text/css">
        div{
            width:300px;
            height: 200px;
            background: -webkit-linear-gradient(left,orange 30%,red 100%);
            margin: 50px;
        }
        div:nth-child(2){
            background: #fff;
            border:1px solid orange;
        }
        div:hover{
    /*      width: 500px;
            height: 400px;
    
    */      
    /*transform: translate(300px);*/
            border-color:#ccc;
        }   
        /*过渡绝对不能写在hover里面*/
        div:nth-child(2){
            transition-property:all;
            transition-duration:0.8s;
            transition-timing-function:ease-in-out;
            transition-delay:0s;
        }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:5.12 (案例) width

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