过渡效果和前缀

最新推荐文章于 2024-08-24 16:16:57 发布

想要成为大佬的小萌新

最新推荐文章于 2024-08-24 16:16:57 发布

阅读量172

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/taotaoaiqinqin/article/details/80359409

版权

HTML5 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>过渡效果和前缀</title>
        <style>
            div{
                background-color: chartreuse;
                width: 200px;
                height: 200px;
                margin: 200px;
                opacity: 0.5;
                /*过渡时间和前缀*/
                /*transition: width 2s,height 2s;
                -webkit-transition:width 2s,height 2s,opacity 1; 
                -moz-transition: width 2s,height 2s;
                -ms-transition: width 2s,height 2s;
                -o-transition: width 2s,height 2s;*/
                transition: all 2s ease-in-out;
                -webkit-transition:all 2s ease-in-out; 

            }
            #mydiv:hover{
                width: 400px;
                height: 400px;
                opacity: 1;
                -webkit-opacity:1 ;
            }
        </style>
    </head>
    <body>
        <div id="mydiv"></div>
    </body>
</html>