CSS过渡属性transitions详细解读——Web前端系列学习笔记

来老铁干了这碗代码

于 2021-06-27 10:00:44 发布

阅读量596

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： css js html css3 html5

本文链接：https://blog.csdn.net/weixin_43899069/article/details/118250574

Web前端专栏收录该内容

24 篇文章

订阅专栏

文章目录

transition
样例代码
效果图

transition

transition是一个复合属性，由4个属性构成，如下表所示。
在这里插入图片描述

teansition-property 属性名称

在这里插入图片描述

transtion-duration 花费时间

在这里插入图片描述

transition –timing -function 时间曲线

在这里插入图片描述

transition-delay 等待时间

在这里插入图片描述

样例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 过渡</title>
    <style>
        /*方环*/
        .border-radius{
            width: 40px;
            height: 40px;
            border: 70px solid #ff6e9b;
            /*变化过程：3s， 下面编写变化过程*/
            transition: 0.5s;
        }
        /*圆环*/
        .border-radius:hover{
            width: 40px;
            height: 40px;

            /*border: 70px solid #ff6e9b;*/
            border: 70px solid;
            border-color: #ff898e #93baff #c89386 #ffb151;

            border-radius: 80px/90px;
        }
    </style>


</head>
<body>
<div class="border-radius"></div>
</body>
</html>