CSS3使用过度动画和缓动效果案例讲解
<h2>transition过渡：</h2><h3>四个小属性</h3>
<table>
<thead>
<tr>
<th width="305">属性</th>
<th width="336">意义</th>
</tr>
</thead>
<tbody>
<tr>
<td width="305">transition-property</td>
<td width="336">哪些属性要过渡</td>
</tr>
<tr>
<td width="305">transition-duration</td>
<td width="336">动画时间</td>
</tr>
<tr>
<td width="305">transition-timing-function</td>
<td width="336">动画变化曲线（缓动效果）</td>
</tr>
<tr>
<td width="305">transition-delay</td>
<td width="336">延迟时间</td>
</tr>
</tbody>
</table>
<ul>
<li>transition过度属性是CSS3浓墨重彩的特性，过度可以为一个元素在不同样式之间变化自动添加“补间动画”</li>
</ul>
<p style="text-align: center;"><img src="https://img.jbzj.com/file_images/article/202107/2021072709391712.png" alt="在这里插入图片描述" /></p>
<ul>
<li>兼容性IE10开始兼容，移动端兼容良好</li>
<li>曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用CSS3过度</li>
<li>优点：动画更细腻，内存开销小</li>
<li>transition属性有4个要素：<br />
transition：width 1s linear 0s;（什么属性要过度、动画时长、变化速度曲线、延迟时间）</li>
</ul>
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画过渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
transition: width 5s linear 0s;
}
.box:hover {
width: 500px;
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html></pre>
</div>
<p>就是需要过渡的的加属性值transition，第一个值为变化的属性</p>
<h2>哪些属性可以参与过渡</h2>
<ul>
<li>所有数值类型的属性，都可以参与过渡，比如width、height、left、top、border-radius</li>
<li>背景颜色和文字颜色都可以被过渡</li>
<li>所有变形（包括2D和3D）都可以被过渡</li>
</ul>
<h3>all：</h3>
<ul>
<li>所有的属性都要参与过渡，可以写all<br />
transition：all 5s linear 0s;</li>
</ul>
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画过渡</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
transition: width 5s linear 0s;
}
.box:hover {
width: 500px;
}
.box1{
width: 200px;
height: 200px;
background-color: blue;
transition: all 5s linear 0s;
}
.box1:hover {
width: 400px;
height: 200px;
background-color: greenyellow;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
</html></pre>
</div>
<h2>过渡的缓动效果：</h2>
<h3>缓动参数</h3>
<ul>
<li>transition的第三个参数就是缓动参数，也就是变化速度曲线<br />
transition：width 1s linear 0s;</li>
</ul>
<h2>常用的缓动参数</h2>
<p style="text-align: center;"><img src="https://img.jbzj.com/file_images/article/202107/2021072709391713.png" alt="在这里插入图片描述" /></p>
<h3>子属性</h3>
<p>transition-timing-function：ease；</p>
<div class="jb51code">
<pre class="brush:xhtml;">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动画过渡</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
border:1px solid black;
}
.box1 p{
width: 50px;
height: 50px;
background-color: blue;
position: relative;
left: 0;
margin-bottom: 10px;
transition: left 5s linear 0s;
}
.box1 p:nth-child(2) {
transition-timing-function: ease;
}
.box1 p:nth-child(3) {
transition-timing-function: ease-in;
}
.box1 p:nth-child(4) {
transition-timing-function: ease-out;
}
.box1 p:nth-child(5) {
transition-timing-function: ease-in-out;
}
.box1:hover p {
left: 100px;
}
</style>
</head>
<body>
<div class="box1">
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
</div>
</body>
</html>
</pre>
</div>
<h2>贝塞尔曲线：</h2>
<ul>
<li>网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数</li>
</ul>
<p style="text-align: center;"><img src="https://img.jbzj.com/file_images/article/202107/2021072709391714.png" alt="在这里插入图片描述" />
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css" rel="external nofollow"rel="stylesheet" />
<link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css" rel="external nofollow"rel="stylesheet" /></p>
頁:
[1]