CSS 的过渡效果

最新推荐文章于 2024-09-09 04:25:28 发布

Python小子

最新推荐文章于 2024-09-09 04:25:28 发布

阅读量1k

点赞数 1

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/weixin_43883022/article/details/88812452

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

CSS 的过渡效果

属性	取值	说明
transition-property	属性名称	指定需要过渡效果的属性
transition-property	all	可以用过渡效果的属性则显示过渡效果（常用）
transition-duration	以秒或毫秒为单位的数字	指定过渡时长
transition-timing-function	ease	慢速开始，快速变化，慢速结束（默认值）
	linear	匀速变化
	ease-in	慢速开始，快速结束
	ease-out	快速开始，慢速结束
	ease-in-out	慢速开始结束，中间先加速后减速
transition-delay	以秒或毫秒为单位的数字	指定过渡效果延迟时间

注：允许行使用过渡效果的属性：
1、与颜色相关的属性
2、取值为数字的属性

简写属性：
transition：property duration timing-function delay；

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            width: 200px;
            height: 100px;
            background-color:red;
            /*过渡效果在这里设置，来回都有过渡效果*/
        }
        #d1:hover{
            background-color: green;
            /*过渡效果在这里设置，只有鼠标悬停时有过渡效果*/
            transition-property:all;
            transition-duration:1s;
            transition-timing-function:linear;
        }
    </style>
</head>
<body>
    <div id="d1"></div>