transition:过渡

墨蓝 2023-07-10 08:47 10阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>回忆录</title>
      <link rel="stylesheet" href="./index.css">
    </head>
    
    <body>
      
      <div></div>
    </body>
    <script> </script>
    
    </html>

* { 
        margin: 0;
        padding: 0;
    }
    
    div { 
        width: 100px;
        height: 100px;
        background-color: #ff0000;
        /* transition-property:all; 监听属性的状态改变（width、height） transition-duration: .6s; 规定多少秒完成 transition-timing-function:linear; 规定运动状态的速度,linear：开始到结束速度一致 transition-delay: 3s; 规定等多少秒才开始进行过渡,默认值为0 可以将上面的四个属性写在一起： transition：transition-property transition-duration transition-timing-function transition-delay; */
        transition: all .6s linear 3s;
    }
    
    div:hover { 
        width: 200px;
        height: 200px;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，10人围观）

还没有评论，来说两句吧...

相关阅读

相关 transition:过渡

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

墨蓝/ 2023年07月10日 08:47/ 0 赞/ 11 阅读

相关 CSS3实现过渡效果 (transition)

CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的动画。 transition 功能：实现元素不同状态之间的平滑过渡。此前

今天药忘吃喽~/ 2022年11月16日 10:53/ 0 赞/ 248 阅读

相关 CSS3之过渡Transition

　　CSS3也有着非常强大的属性，那就是过渡——Transition。过渡——Transition在W3C的描述：“css的transition允许css的属性值在一定的时间区

系统管理员/ 2022年09月08日 03:54/ 0 赞/ 281 阅读

相关 Vue的过渡&动画效果-transition

![20210727104234223.gif][] / 可以设置不同的进入和离开动画 / / 设置持续时间和动画函数 / .fade-

我不是女神ヾ/ 2022年09月01日 08:12/ 0 赞/ 253 阅读

相关过渡元素transition的那些事儿

之前看了一些教程，虽然会用，但是总感觉哪里没有太弄清楚，这次终于弄清楚了，来分享一下，其实简单的不行。不知道有些人为什么写的那么复杂 <!DOCTYPE h

偏执的太偏执、/ 2022年06月13日 07:58/ 0 赞/ 216 阅读

相关 Android Transition（Android过渡动画）

> 参考链接: > \- [http://www.jianshu.com/p/0af52be90ae6][http_www.jianshu.com_p_0af52be90a

向右看齐/ 2022年06月03日 06:27/ 0 赞/ 326 阅读

相关 CSS3 过渡之transition

通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。 CS

浅浅的花香味﹌/ 2022年03月18日 13:28/ 0 赞/ 349 阅读

相关过渡 - transition

过渡 - `transition` 是变形`transfrom`其中一种效果，定义为一种状态过渡到另一种状态的过程，今天学习到css3动画，特此记录下过渡的使用和一些效果。

我会带着你远行/ 2022年01月12日 04:37/ 0 赞/ 276 阅读

相关 CSS3过渡——transition

　　让CSS属性值在一定时间内平滑过渡 transition属性值 1.property 　　检索/设置对象中参与过渡的属性　　可设置none（不设置过渡）、

矫情吗；*/ 2021年10月19日 11:52/ 0 赞/ 414 阅读

相关 Vue中transition过渡效果

目录一，进入/离开过渡效果二，过渡效果的钩子函数三，过渡效果+Animate.css 四，列表过渡 -------------------- 一，进入

超、凢脫俗/ 2021年07月25日 14:46/ 0 赞/ 606 阅读