从前端小白到大佬过渡效果

最新推荐文章于 2023-06-21 08:32:31 发布

一只琳娜

最新推荐文章于 2023-06-21 08:32:31 发布

阅读量142

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/my_prince/article/details/108818149

版权

css3 过渡

简单地说就是从一个状态慢慢的变成另外一个状态，让我们的页面更加具有动感，经常与：hover一起使用。

transition：要过度的属性花费时间运动曲线开始时间

属性	可以是宽度、高度、背景颜色、内外边距都可以，所有就是all
花费时间	单位是s，如0.5s
运动曲线	默认是ease（减速）/linear(匀速)/ease-in（加速）/ease-in-out(先加速后减速) 可省略
开始时间	单位是s，可以设置延迟触发时间，默认0s 可省略

实例：

<!doctype html>
<html>

<head>
    <meta charset='UTF-8' />
    <title>damoe</title>
    <style>
        /* 变动多种属性的写法 */
        
        div {
            width: 80px;
            height: 80px;
            background-color: aquamarine;
            /* transition: width 1s ease-in-out 0.5s, height 1s ease-in-out 0.5s; */
            /* 与上一种写法效果相同 */
            transition: all 1s ease-in-out 0.5s;
        }
        
        div:hover {
            width: 200px;
            height: 200px;
        }
        /* 只变动一种属性的写法 */
        
        img {
            transition: filter 1s;
        }
        
        img:hover {
            filter: blur(5px);
        }
    </style>
</head>

<body>
    <img src="imgs/pvp.png">
    <div></div>
</body>

</html>

效果：
在这里插入图片描述
emmm…
动画效果是看不到的了，只截了最后结果的图，可以自己试试。