CSS3新增样式（二）——过渡效果（transition）

最新推荐文章于 2024-09-30 18:35:38 发布

pro1822

最新推荐文章于 2024-09-30 18:35:38 发布

阅读量4.4k

点赞数 7

分类专栏： HTML+CSS基础文章标签： css3

本文链接：https://blog.csdn.net/qq_41523175/article/details/123827600

版权

今天，我们继续来学习CSS3的新增样式——过渡效果。

一、过渡效果（transition）介绍

什么是过渡效果呢？一个动画到另一个动画，如果是瞬间完成的话，就不好看，所以我们需要添加上一个过渡。

举个例子：

我们有一个这样的div：

<head>
    <style>
        .box{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        .box:hover {
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="box">hello</div>
</body>

效果如下：

我们可以看到这个旋转45°是瞬间完成的，那我们如果不想瞬间完成的话，我们就需要加上过渡效果了。

我们加上两行过渡属性代码：

        .box {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            transition-property: transform;
            transition-duration: 1s;
        }

效果如下：

transition包含三个常用属性：

        transition-property：过渡属性（例如：transform旋转）

        transition-duration：过渡持续时间（例如1s）

        transition-timing-function：过渡函数（调整过渡的不同速度变化，匀速、慢快慢、匀速慢，可以按“F12”，查看不同的函数效果）

transition-delay：过渡延迟时间（意为，等待一段时间后，再执行动画）