首页 前端知识 〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果

〖大前端 - 基础入门三大核心之CSS篇㉓〗- 过渡的缓动效果

2024-03-10 11:03:56 前端知识 前端哥 696 965 我要收藏
  • 当前子专栏 基础入门三大核心篇 是免费开放阶段推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V!
  • 说明:该文属于 大前端全栈架构白宝书专栏,目前阶段免费开放购买任意白宝书体系化专栏可加入TFS-CLUB 私域社区。
  • 福利:除了通过订阅"白宝书系列专栏"加入社区获取所有付费专栏的内容之外,还可以通过加入星荐官共赢计划 加入私域社区。
  • 作者:不渴望力量的哈士奇(哈哥),十余年工作经验, 跨域学习者,从事过全栈研发、产品经理等工作,目前任某金融品类App负责人。
  • 荣誉:2022年度博客之星Top4博客专家认证、全栈领域优质创作者、新星计划导师“星荐官共赢计划” 发起人
  • 现象级专栏《白宝书系列》作者文章知识点浅显易懂且不失深度TFS-CLUB社区创立者旨在以“赋能 共赢”推动共建技术人成长共同体

  • 🏆 白宝书系列
    • 🏅 Python全栈白宝书
    • 🏅 产品思维训练白宝书
    • 🏅 全域运营实战白宝书
    • 🏅 大前端全栈架构白宝书


文章目录

  • ⭐️ 过渡
    • 🌟 过渡的缓动参数
    • 🌟 贝塞尔曲线
    • 🌟 过渡效果实战

上篇我们已经学会了过渡的基本使用,也知道了 “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的演员。需要做一个特殊设置:



转载请注明出处或者链接地址:https://www.qianduange.cn//article/3508.html
评论
发布的文章

Jquery——基础

2024-04-03 12:04:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!