【CSS3学习笔记】19：过渡效果

最新推荐文章于 2022-05-18 19:46:30 发布

大桔骑士v

最新推荐文章于 2022-05-18 19:46:30 发布

阅读量907

点赞数

分类专栏： CSS 文章标签： css3 过渡效果 html5

本文链接：https://blog.csdn.net/SHU15121856/article/details/77782149

版权

CSS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

利用CSS3提供的过渡效果可以不借助JavaScript实现简单的用户交互功能。
[1]总的transition属性
利用这个属性，结合一些简单的CSS动作(如:hover)来触发平滑过渡功能，也就产生了过渡效果。
这里写图片描述
复习：前面说的:hover属于伪选择器中的伪类选择器中的动态伪类选择器，动态伪类选择器根据条件的改变选择元素，常用在鼠标点击、悬停等。:hover鼠标悬停，:active按住不放，:focus匹配获得焦点的文本框。

[2]transition-property设置哪些属性要过渡
这里写图片描述
了解哪些属性可以做过渡?大部分CSS样式都可以。

[3]transition-duration设置过渡时间
如设置为半秒钟：

transition-duration: .5s;

[4]transition-timing-function设置缓动方案
这里写图片描述
可以用最后一个自己设置贝塞尔曲线。
在这里还可以用steps()设置跳跃式过渡，如跳跃2次：

transition-timing-function: steps(2);

[5]transition-delay设置过渡延迟效果
如延迟一秒：

transition-delay: 1s;

还可以和transition-property的值一一对应：

transition-delay: 1s,0s,1s;

[6]浏览器兼容性前缀问题
到目前为止应当在实战中加上各个浏览器兼容性前缀。

*测试代码

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>CSS3过渡效果</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div id="id1">我是HTML</div>
</html>

@charset "utf-8";
body{
    margin: 100px;
}

#id1{
    width: 200px;
    height: 200px;
    border: 1 solid green;
    /*设置哪些属性要过渡*/
    transition-property: background-color,color,margin-left;
    /*设置过渡时间*/
    transition-duration: 3s;
    /*设置缓动方案*/
    transition-timing-function: ease-in;
    /*设置过渡延迟效果*/
    transition-delay: 1s;
}

#id1:hover{
    background-color: black;
    color: white;
    margin-left: 100px;
}