过渡动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过度动画</title>

    <style>

    #box{
        width: 100px;

        height: 100px;

        background-color: pink;

        /*transition 过度动画 两个必写参数 第一个为动画要改变的属性 第二个为 动画执行的时间 */

        /*过度动画默认不会执行 必须动画的属性 发生改变的时候才会触发动画执行*/
        -webkit-transition: width 3s;
        -moz-transition: width 3s;
        -ms-transition: width 3s;
        -o-transition: width 3s;
        transition: width 3s;
    }

    /*#box:hover{*/

        /*width: 600px;*/
    /*}*/

</style>

</head>
<body>

<div id="box">

</div>

<script>

    var box = document.querySelector("#box");

    box.onclick = function () {

        this.style.width = "900px"
    }

</script>

</body>
</html>

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容