CSS3中的过渡

最新推荐文章于 2022-10-01 19:51:33 发布

萌新彭于晏

最新推荐文章于 2022-10-01 19:51:33 发布

阅读量130

点赞数

文章标签： transition 过渡 CSS CSS3

本文链接：https://blog.csdn.net/weixin_43555093/article/details/88658888

版权

CSS3中的过渡标签:transition

transition有四大属性
1.transition-porperty:选择要改变的样式名
可以选择像width,color等样式,也可以直接写all,表示所有样式都会改变.

 transition-property:all;

2.transition-duration:表示过渡阶段的时间
填写上时间,如2s.

 transition-duration:2s;

3.transition-timing-function:表示过渡的状态

值	描述
linear	规定以相同速度开始至结束的过渡效果(等于cubic-bezier(0,0,1,1))
ease	规定以慢速开始,然后变快,然后变慢的过渡效果(等于cubic-bezier(0.25,0.1,0.25,1))
ease-in	规定以慢速开始的过渡效果(等于cubic-bezier(0.42,0,1,1))
ease-out	规定以慢速结束的过渡效果(等于cubic-bezier(0,0,0.58,1))
ease-in-out	规定已慢速开始和结束的过渡过程(等于 cubic-bezier(0.42,0,0.58,1))
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

transition-timing-function:linear;

4.transition-delay:表示多久之后开始执行过渡

 transition-dalay:2s;

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡</title>
    <style>
        div{
            width:200px;
            height:200px;
            background-color: #f00;
            border:1px solid #000;
        }
        div:hover{
            width:100px;
            height:100px;
            background-color: #00f;
            border-radius:50%;
            transition-property:all;
            transition-duration:2s;
            transition-timing-function:linear;
            transition-dalay:2s;

        }
    </style>

</head>
<body>
<div></div>
</body>
</html>