css前端还是后端（〖大前端 – 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果）
文章目录
⭐️ 过渡 🌟 过渡的缓动参数 🌟 贝塞尔曲线 🌟 过渡效果实战上篇我们已经学会了过渡的基本使用 ，也知道了 “transition ” 有四个参数 ，接下来我们来详细的学习一下 “transition ” 的第三个参数 - “缓动参数 ” 。
⭐️ 过渡
该章节的知识点 ，主要是围绕 "过渡的缓动效果" 来学习的 。除了 "过渡的缓动参数" 、"贝塞尔曲线" 之外 ，还有一个实现 “缓动效果 ” 的小案例 。
🌟 过渡的缓动参数
transition的第三个参数就是缓动参数 ，也是变化速度曲线 。
我们之前只用到了linear值 ，linear就是匀速运动 ，实际上除了linear ，还有其他四个常用的缓动参数：
上图中的曲线就是css支持的变化速度曲线 。
下面直接看例子：
通过例子可以看到不同的变化速度曲线 ，元素移动的速度是不同的 ，但最终都是2s到达终点 。
代码如下：
<!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>Document</title> <style> .box1 { width: 1000px; height: 600px; border: 1px solid #000; } .box1 p { width: 100px; height: 100px; background-color: orange; position: relative; left: 0; transition: left 2s 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: 800px; } </style> </head> <body> <div class="box1"> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </body> </html>🌟 贝塞尔曲线
我们也可以自定义动画缓动参数 ，就是通过自定义贝塞尔曲线 。
这个网站可以生成贝塞尔曲线：https://cubic-bezier.com/
进入这个网站 ，拖动左侧的曲线 ，得到想要的贝塞尔曲线 。
我们的缓动参数就可以设置成这个贝塞尔曲线：大家可以实战一下 ，观察这个贝塞尔曲线下 元素的移动效果 。
🌟 过渡效果实战
案例一
我们在上网时经常会看到鼠标移动到一个图片时 ，底部浮现出现一行解释的文字 ，这个效果是怎么实现的呢？
答：其实就是字被图片压盖 ，当鼠标浮上去时 ，字再出现在图片的上方；所有的压盖效果都需要使用绝对定位来实现 。
下面我们就来做一个这样的案例：第一步 ，使用绝对定位 ，给盒子下方添加文字；再次注意：绝对定位的盒子 ，不写宽度无法自动撑满 。
第二步：通过透明度属性 opacity ，实现将鼠标浮上去时 ，透明图由0变成1 。
第三步：利用过渡 ，让透明度缓慢变化 ，实现文字慢慢浮现的效果 。
我们在实现这个例子时 ，用到了 "浮动" 、"子绝父相对" 、"过渡" 的知识点 。"过渡"其实就写了一条 ，相对来说来是比较简单的 ，大家还是要多多练习实例 ，这样才能更好的消化学到的知识 。
案例二
我们在网页中也经常会看到一些有动画效果的小图标 ，比如下面这种鼠标浮上去背景旋转 ，同时图标也会放大 ，这种效果是怎么实现的呢？
用到的知识点有很多 ，例如浮动 、子绝父相 、伪元素 、旋转变形 、过渡等 。接下来我们就来实现它 。
第一步：实现网页布局：
先来分析一下 ，四个图标处在四个盒子中 ，后面有一个蓝色的圆的背景 ，鼠标放到盒子上时 ，只有背景旋转 ，图片放大 。背景图片不是标签 ，是无法实现独立旋转的 ，如果旋转盒子 ，图标也会跟着旋转 ，我们可以给盒子添加一个伪元素 ，给伪元素添加背景图片 ，旋转也是由伪元素旋转 。
准备四个背景图片：
代码如下：
第二步：利用变形 + 过渡实现动画效果 。
大家一定要自己从头到尾敲两遍 ，只看是学不会的 。
案例三
这个案例 ，我们利用3D旋转 ，实现一个非常有意思的“翻盖 ”的动画特效：
用到的知识点有 "子绝父相" 、"3D旋转" 、"transform-origin属性"（用来设置旋转的原点 ，有两个描述值 ，不用刻意记忆怎么设置 ，做的时候多尝试几次就知道了）
第一步：实现网页布局
第二步：实现鼠标触碰时 ，上面的图片进行3D旋转 。第一个延左边的轴打开 。
第三步：将下面两个也实现动画效果 。可以利用层叠的性质设置 。
案例四
接下来外面看一个酷炫的特效 ，正方体的旋转 ，看起来非常有立体感：
第一步：利用3D旋转和空间移动 ，绘制一个正方体：
代码如下：
<!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>Document</title> <style> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; border: 1px solid #000; margin: 100px auto; perspective: 300px; position: relative; } .box p { position: absolute; top: 0; left: 0; width: 200px; height: 200px; } .box p:nth-child(1) { background-color: #e6aaaa; /* 前面 */ transform: translateZ(100px); } .box p:nth-child(2) { background-color: #aae6df; /* 顶面 */ transform: rotateX(90deg) translateZ(100px); } .box p:nth-child(3) { background-color: #f3a6de; /* 背面 */ transform: rotateX(180deg) translateZ(100px); } .box p:nth-child(4) { background-color: #84afef; /* 下面 */ transform: rotateX(-90deg) translateZ(100px); } .box p:nth-child(5) { background-color: #edef84; /* 左面 */ transform: rotateY(90deg) translateZ(100px); } .box p:nth-child(6) { background-color: #a6ef84; /* 左面 */ transform: rotateY(-90deg) translateZ(100px); } </style> </head> <body> <div class="box"> <p></p> <p></p> <p></p> <p></p> <p></p> <p></p> </div> </body> </html>第二步：使整个正方体进行旋转
需要放置一个新的“大舞台 ”section ，将上面的正方体的box当作演员 。而box既是p的舞台 ，又是section的演员 。需要做一个特殊设置：
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！