css3——过渡transition

学习目标:

掌握css3过度transition


一、什么是过渡:

  • 通过 css3 可以在不使用 flash 动画或 javascript 的情况下,为元素从一种样式变换为另一种样式时添加过渡效果。

  • css3 过渡就是元素从一种样式逐渐改变为另一种的效果,需要确定两点:

    1. 需要添加效果的 css 属性

    2. 指定效果实现的时长

二、学习总结:

transition:过度属性(all) 过度完成时间 缓冲描述 延迟时间;

属性名词解释:

1.过度属性--------可以直接写all
2.过度时间--------单位是s
3.缓冲描述--------linear匀速,ease非匀速,cubic-bezier贝塞尔曲线
4.延迟时间--------单位是s

实现效果图:
在这里插入图片描述
实现效果代码块:

<style>
       /* transition 要过渡的属性 花费时间 运动曲线 何时开始*/
        
        div {
    
    
            width: 300px;
            height: 300px;
            background-color: skyblue;
            /* transition: width .5s ease, height .5s ease 1s; */
            /*如果想写多个属性,用 , 隔开*/
            transition: width .5s, height 1s;
        }
        
        div:hover {
    
    
            width: 600px;
            height: 500px;
        }
    </style>
<body>
    <div>

    </div>
</body>

注意:如果未指定的时间,transition将没有任何效果,因为默认值是0。

猜你喜欢

转载自blog.csdn.net/m0_60263299/article/details/119532975
今日推荐