一文搞懂css 2D动画效果

最新推荐文章于 2024-04-03 02:18:32 发布
最新推荐文章于 2024-04-03 02:18:32 发布
阅读量1.5k 收藏 19
点赞数 13
分类专栏： 网页前端高级编程从入门到精通 文章标签： 动画 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/apple_51931783/article/details/122729648
版权

文章目录

前言

今天要介绍的是2D动画效果,主要包括2D动画的定位、旋转、缩放。

先来一波动画效果展示,后面会具体到每一个案例。

进度条

在这里插入图片描述

盒子旋转

在这里插入图片描述

盒子放缩

在这里插入图片描述

一、过渡动画效果简述 transition:

1、代码示例

        transition: all .5s 1s;
        过渡属性,过渡时间,过渡曲线,停止间隔（上述没有书写过渡函数,过渡函数不常使用）

代码如下：

<!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>
        /* 
         进度条效果
          */
        .nav {
            margin: 20px;
            width: 200px;
            height: 15px;
            border-radius: 7px;
            border: red 1px solid;
            padding: 1px;
        }

        /* 
        哪个模块发生变化将transition加在哪个盒子内
         */
        .nav1 {
            width: 100px;
            height: 15px;
            border-radius: 7px;
            background-color: red;
            transition: all .5s 1s;
        }

        /* 
        经过.nav则.nav1发生变化,颜色变蓝
         */
        .nav:hover .nav1 {
            width: 150px;
            background-color: blue;

        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="nav1"></div>
    </div>
    <div class="nav">
        <div class="nav1"></div>
    </div>
    <div class="nav">
        <div class="nav1"></div>
    </div>
    <div class="nav">
        <div class="nav1"></div>
    </div>
    <div class="nav">
        <div class="nav1"></div>
    </div>
    <div class="nav">
        <div class="nav1"></div>
    </div>
    <div class="nav">
        <div class="nav1"></div>
    </div>

</body>

</html>

2、效果展示

在这里插入图片描述

二、定位translate

1、2D定位 transform: translate(50%, 50%);

百分比是相对于盒子左上角为原点,向右向下移动了多少。
可以将transform加在子代元素中,也可以加在hover内。

①.代码示例

代码如下：

<!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>
    <!-- 
        固定盒子的方式有定位,浮动,外边距等
        以上方式盒子定位容易影响到其他盒子的位置
        2D盒子定位的盒子不会影响到其他盒子的位置,只会覆盖其他盒子
     -->
    <style>
        p {
            display: inline-block;
            width: 300px;
            height: 300px;
            background-color: turquoise;

        }

        p::before {
            content: '';
            display: block;
            width: 50%;
            height: 50%;
            background-color: brown;
            /* 使用百分比的时候用的是该盒子长宽的百分比 */
            transform: translate(50%, 50%);
        }
    </style>
</head>

<body>
    <p></p>
</body>

</html>

②.效果展示

背景盒子为浅蓝色,中间盒子为棕色,中间盒子大小为原来盒子的50%
而棕色盒子向右下偏移的长度又为棕色盒子的50%

在这里插入图片描述

2、2D定位 transform: translateY(-20px);【抬高】

在x轴或y轴移动一定的像素，有个兄弟是translateY
在这里就是进行了竖直方向的移动

①.代码示例

代码如下：

<!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>
        div {
            float: left;
            margin: 100px auto;
            width: 200px;
            height: 400px;
            background-color: cadetblue;
            color: #fff;
            font-size: 30px;
            font-family: '幼圆';
            text-align: center;
            line-height: 200px;
            font-weight: 700;
            border: cyan 5px solid;
            transition: all .4s;


        }

        div:hover {
            box-shadow: 0px 20px 10px cyan;
            transform: translateY(-20px);
        }

        div::before {
            content: '';
            display: block;
            width: 200px;
            height: 200px;
            background-size: 200px 200px;
            background-image: url(../1.jpg);
        }
    </style>
</head>

<body>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
    <div>Hello</div>
</body>

</html>

②.效果展示

在这里插入图片描述

三、2D旋转 transform: rotate(180deg);

旋转180deg意思就是旋转180度（顺时针）
transform-origin: left bottom;
这句话的意思是,以左下角为中心点（因为旋转默认是以中心为旋转点的）

1、代码示例

代码如下：

<!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>
        div {
            overflow: hidden;
            position: relative;
            width: 300px;
            height: 300px;
            border: springgreen 5px solid;
            margin: 200px auto;

        }

        /* 
        这里不能旋转360度,旋转360度会使页面回到原始位置,给人一个没有旋转的假象
         */
        div::before {
            position: absolute;
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            background-color: steelblue;
            transform-origin: left bottom;
            transform: rotate(180deg);
            transition: all .6s;
        }

        div:hover::before {
            transform: rotate(0);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

2、效果展示

在这里插入图片描述

四、2D放缩

1、2D放缩 transform: scale(50%, 50%);

transform-origin: left bottom;
意思是按照左下角为固定中心,进行缩放
transform: scale(50%, 50%);
意思是缩放的宽、高为原来50%

①.代码示例

代码如下：

<!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>
    <!-- 
        h盒子放缩是页面布局中不可缺少的一部分
        可以根据transform-origin定位,使盒子依赖于某一位置进行缩放
     -->
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: steelblue;
            transition: all .7s;
            border: red 3px solid;
        }

        div:hover {
            transform-origin: left bottom;
            transform: scale(50%, 50%);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

②.图片展示

在这里插入图片描述

2、2D放缩 transform: scale(1.25);

transform: scale(50%, 50%);
意思是缩放的宽、高为原来50%
transform: scale(1.25);
意思是将图像放大为原来的1.25倍
是网页布局中常用到的一个动画效果。

①.代码示例

代码如下：

<!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>
        /* 
        一、
        盒子的自动放大,由于盒子有边框所以盒子内的图片放大后不会撑开盒子,而是仅仅显示盒子内的图片
         */
        div {
            overflow: hidden;
            margin: 200px auto;
            width: 200px;
            height: 200px;

            /* background-image: url(../two.png); */
        }

        div img {
            transition: all .6s;
            width: 100%;
            height: 100%;
        }

        div:hover img {
            transform: scale(1.25);
        }
    </style>
</head>

<body>
    <div><img src="../two.png" alt=""></div>
</body>

</html>

②.图片展示

在这里插入图片描述

总结

过渡是动画效果中常用的技术,2D动画效果主要的三大方面要好好掌握,华丽的动画会带给人不一样的体验,但是由于动画效率较为低下不推荐使用过多的动画效果。

酷尔。
关注
  • 13
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
DCSS5门机调试说明.pdf
10-11
DCSS5门机调试说明.pdf
CSS动画效果
11-20
非常炫的css circle动画，用了animation和keyframes。修改方便容易。
9种常用CSS动画，看这一篇就够了
m0_75280563的博客
04-03 319
top:65%;left:15%;;/* 动画3 */top:20%;left:15%;bottom: 0;;/* 动画4 */height:50%;top:100%;right:90px;/* 动画5 */left:20%;top:20%;left:25%;top:30%;
深入浅出 CSS 动画
热门推荐
前端开发博客
05-21 2万+
关注公众号前端开发博客，领27本电子书回复加群，自助秒进前端群本文将比较全面细致的梳理一下 CSS 动画的方方面面，针对每个属性用法的讲解及进阶用法的示意，希望能成为一个比较好的从入门到进阶的教程。CSS 动画介绍及语法首先，我们来简单介绍一下 CSS 动画。最新版本的 CSS 动画由规范 -- CSS Animations Level 1[1] 定义。CSS 动画用于...
CSS动画
LiHang1234567777的博客
07-21 4677
今天简单了解一下css动画一、css动画是什么？CSS中的动画类似于flash中的逐帧动画，表现细腻并且非常灵活，使用CSS中的动画可以取代许多网页中的动态图像、Flash动画或者JavaScript实现的特殊效果。二、使用步骤1.主要样式指定动画名称动画持续时间动画填充模式forwards;/*forwards把动画停在最后一个*/动画延迟时间animation-delay/*当值为负数时动画已经开始了多长时间*/2.读入数据...
CSS实现2D效果
akaWoverine的博客
11-01 177
CSS实现2D效果 放大缩小背景色变化 语法 属性 描述 transition 简写属性，用于在一个属性中设置四个过渡属性 transition-property 规定应用过渡的CSS属性的名称 transition-duration 定义 过渡花费的时间，默认是0 transition-timing-function 规定过渡效果的时间曲线，默认是"ease" transition-delay 规定过渡效果何时开始，默认是0 示例 transition <
css动画详解
m0_56713342的博客
10-30 7368
1、使⽤css技术来控制⻚⾯元素css属性的变化。2、css动画优势：不需要⽤js也能写，⽐较流畅，由浏览器去执⾏动画，减少代码量，性能⽐较⾼3、⼀般兼容到ie10以上浏览器（⼀般没太⼤问题）二、过渡1.过渡的理解过渡（transition）[træn'siʒǝn]-通过过渡可以指定⼀个属性发⽣变化时的切换⽅式，平滑的过渡-需要在某种条件下触发，例如hover、active、focus情况下-⼀次性的效果，不能循环，只能做简单的动画-只有两帧，设置动画初始值和结束值。
CSS系列之动画
老__L的博客
02-27 5404
本文主要介绍CSS的animation、animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function、@keyframes属性。 动画是CSS3中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果。
css基础知识十二：CSS3常见动画有哪些？实现方式？
Allen-Ye博客
06-27 1768
CSS3常见动画有哪些？实现方式？
【css】css动画实现的3种方式
t13965688123的博客
05-25 1万+
css实现动画主要有3种方式，①、transition实现过渡动画，②、transform转变动画，③、animation实现自定义动画。
css之动画使用 （详解）
jw_xiaoming的博客
11-26 1618
动画使用案例
一文搞懂C语言回调函数
01-27
我们先来看看百度百科是如何定义回调函数的：回调函数就是一个通过函数指针调用的函数。如果你把函数的指针（地址）作为参数传递给另一个函数，当这个指针被用来调用其所指向的函数时，我们就说这是回调函数。...
一文搞懂Raft算法
01-27
raft是工程上使用较为广泛的强一致性、去中心化、高可用的分布式协议。在这里强调了是在工程上，因为在学术理论界，最耀眼的还是大名鼎鼎的Paxos。但Paxos是：少数真正理解的人觉得简单，尚未理解的人觉得很难，...
一文搞懂混合动力汽车
01-14
经过4S店销售的一顿狂轰乱炸，你还是搞不懂混合动力汽车有插电式与非插电式之分，还有串联式、并联式、混联式的区别。 无妨，接着看下文也许你就懂了！ 混合动力汽车透视图 传统汽车由内燃机燃烧...
网络知识扫盲，一文搞懂DNS
02-24
在找工作面试的过程中，面试官非常喜欢考察基础知识，除了数据结构与算法之外，网络知识也是一个非常重要的考察对象。而网络知识，通常是很抽象，不容易理解的，有很多同学就在这里裁了跟头。为了更好地通过面试，...
css2D转换
LIANG_XJT的博客
05-18 551
css2D转换 css里面的2D转换有什么效果呢？首先2D转换其实是能够对元素进行移动、缩放、转动、拉长或拉伸，js里面很多简单的动画效果也是经过2D转换实现的，转换是使元素改变形状、尺寸和位置的一种效果。 那么到底有哪一些呢？首先我们来试一下我们常见的transform属性， 1、 你们发现了吗？第二个div移动动距离原来的左上边移动了这是为什么呢？ 没错第二...
CSS3的2D动画属性
super码力的博客
10-25 726
动画是css中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。相比过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。
CSS 2D动画效果
bear_huangzhen的专栏
09-19 759
示例1（盾牌动画）： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>盾牌动画</title> <link rel="shortcut icon" href="bkq.ico" type="ima...
css动画效果
m0_51431448的博客
03-23 1万+
动画1（沿着椭圆转动） 其实是个2D转动，只不过咱们设置椭圆，然后加上scale缩放（近大远小），看上去就是3D效果 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" con...
一文搞懂yolov9训练
最新发布
04-19
YOLOv9是一种目标检测算法，它是YOLO（You Only Look Once）系列算法的最新版本。相比于之前的版本，YOLOv9在准确性和速度方面都有所提升。 YOLOv9的训练过程可以分为以下几个步骤： 1. 数据准备：首先需要准备训练所需的数据集，包括标注好的图像和对应的标签。标签通常包含目标的类别和位置信息。 2. 模型选择：根据实际需求选择合适的YOLOv9模型，YOLOv9提供了不同尺度的模型，可以根据目标大小和计算资源进行选择。 3. 模型配置：配置模型的超参数，包括输入图像尺寸、训练批次大小、学习率等。这些参数会影响模型的训练效果和速度。 4. 模型初始化：使用预练的权重文件初始化模型，这有助于加快型的收敛速度。 5. 损失函数定义：定义用于计算模型损失的函数，YOLOv9使用了多个损失函数来同时优化目标类别预测、位置回归和目标置信度。 6. 训练过程：通过反向传播算法和优化器对模型进行训练。训练过程中，模型会根据损失函数的反馈进行参数更新，逐渐提高模型的准确性。 7. 模型评估：训练完成后，需要对模型进行评估，通常使用验证集或测试集来评估模型在未见过的数据上的性能。 8. 模型调优：根据评估结果，可以对模型进行调优，例如调整超参数、增加训练数据、使用数据增强等方法来提高模型的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

酷尔。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值