[前端学习之CSS3]（03）：CSS的动画与特效

lemon懵懵

于 2024-10-08 20:46:43 发布

阅读量613

点赞数 16

分类专栏：前端学习CSS 文章标签：前端 css 学习

本文链接：https://blog.csdn.net/m0_75100421/article/details/142708624

版权

前端学习CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS3中新增了一些用来实现动画效果的属性，通过这些属性可以实现以前通常需要使用JavaScript或者flash才能实现的效果，例如，对HTML中的标签进行平移、缩放、旋转、倾斜，以及添加过渡效果等，并且可以将这些变化组合成动画效果来进行展示。

一，变换（transform）

在CSS3中提供了 transform 和 transform-origin 两个用于实现2D变换的属性，其中transform属性用于实现平行、缩放，旋转和倾斜等2D变换，而transform-origin属性则是用于设置中心点的变换。

transform属性的属性值如下表所示：

值 / 函数	说明
none	表示无变换
translate（x,y）	表示实现2D平移。第一个参数对应水平方向，第二个参数对应Y轴。如果第二个参数未提供，则默认为0
translate X（x）	表示沿 X 轴移动元素。括号内为移动距离。
translate Y（y）	表示沿 Y 轴移动元素。括号内为移动距离。
scale (x, y)	表示进行2D缩放。 `x` 和 `y` 是缩放因子，可以是正数或负数（负数会导致元素翻转）第一个参数对应水平方向，第二个参数对应垂直方向。如果第二个参数未提供，则默认取第一个参数的值。
scale X (x)	表示在X轴上进行缩放。
scale Y (y)	表示在Y轴上进行缩放。
rotate (angle)	表示进行2D旋转。 angle 是旋转角度，通常以度°（deg）为单位。
skew (x, y)	表示对元素进行2D倾斜。 x 是沿水平方向X轴的倾斜角度，y是沿垂直方向Y轴的倾斜角度如果第二个参数未提供，则默认为0
skew X (x)	表示在X轴上进行倾斜。
skew Y (y)	表示在Y轴上进行倾斜。
matrix (a, b, c, d, e, f)	代表一个2D矩阵变换的函数来执行复杂的变换，包括旋转、缩放、移动和倾斜。它以一个包含六个值（abcdef）的变换矩阵的形式指定一个2D变换。相当于直接应用一个 [a b c d e f] 变换矩阵，也就是基于x轴（水平方向）和y轴（垂直方向）重新定位标签，此属性值的使用涉及数学中的矩阵。

transform属性支持一个或多个变换函数，也就是说通过transform属性可以实现平移、缩放、旋转和倾斜等组合的变换效果。不过，在为其指定多个属性值时不是使用常用的逗号“，”进行分割，而是使用空格进行分隔。

实例：在HTML页面中，当鼠标滑过手机图片时，逐渐向两边展开手机图片，实现步骤如下

（1）新建一个HTML文件，然后通过<img>标签添加四张要实现动画效果的图片，关键代码如下：

<!--整体的大盒子-->
<div class="mr-content">

  <!--第一个盒子：第1张图片-->
  <div class="mr-block">
    <h1>旋转</h1>
    <img src="../img/表情包1.png"class="mr-img1">
  </div>

  <!--第二个盒子：第2张图片-->
  <div class="mr-block">
    <h1>缩放</h1>
    <img src="../img/表情包2.png"class="mr-img2">
  </div>

  <!--第三个盒子：第3张图片-->
  <div class="mr-block">
    <h1>平移</h1>
    <img src="../img/表情包3.png"class="mr-img3">
  </div>

  <!--第四个盒子：第4张图片-->
  <div class="mr-block">
    <h1>倾斜</h1>
    <img src="../img/表情包4.png"class="mr-img4">
  </div>

（2）新建一个CSS3文件，通过外部样式引入HTML文件，通过transform中的rotate属性值实现第一张图片的旋转效果，关键代码如下：

    /*后代选择器，中间空格隔开*/
.mr-content .mr-block .mr-img1:hover{  /*当鼠标悬停图片上时*/
  transform: rotate(30deg);          /*顺时针旋转30°*/
}

（3）通过transform中的scale属性值实现第二张图片的缩放效果，关键代码如下：

 .mr-content .mr-block .mr-img2:hover{
      transform: scaleX(2);           /*在X轴上进行放大两倍*/
    }

（4）通过transform中的translate属性值实现第三张图片的平移效果，关键代码如下：

 .mr-content .mr-block .mr-img3:hover{
   transform:translate(60px);      /*在X轴上向右平移60像素*/
 }

（5）通过transform中的skew属性值实现第四张图片的倾斜效果，关键代码如下：

.mr-content .mr-block .mr-img4:hover{
   transform:skew(3deg,30deg);      /*在X轴和Y轴上进行倾斜*/
 }

完成代码编辑后，在浏览器中运行代码，当鼠标选悬停在图片上时，图片就会显示对应的动画效果，运行效果对比如图所示：

二，过渡（transition）

CSS3提供了用于实现过渡效果的 transition 属性，该属性可以控制HTML标签的某个属性发生改变时所经历的时间，并且以平滑渐变的方式发生改变，从而形成动画效果。下面我将逐一介绍transition的各种属性。

1，指定参与过渡的属性

CSS3中指定参与过渡的属性为 transition-property，语法格式如下：

transition-property:all none property1, property2, property3, ...;

● all：默认值。表示所有可以进行过渡的CSS3属性。

● none：表示不指定过渡的CSS3属性。

● property：表示要进行过渡的CSS3属性。可以同时指定多个属性值，用英文格式的 "," 进行分隔

2，指定过渡持续的时间

CSS3中指定参与过渡的属性为 transition-duration，语法格式如下：

transition-duration: time1, time2, ...;

● time：用于指定过渡持续的时间，默认值为0。如果存在多个属性值, 用英文格式的 "," 进行分隔

3，指定过渡的延迟时间的属性

CSS3中指定参与过渡的属性为 transition-delay，语法格式如下：

transition-delay: time1, time2, ...;

● time：用于指定延迟过渡的时间，默认值为0。如果存在多个属性值, 用英文格式的 "," 进行分隔

4，指定过渡的动画类型属性

CSS3中指定参与过渡的属性为 transition-timing-function，语法格式如下：

 transition-timing-function: timing-function1, timing-function2, ...;

● timing-function1, timing-function2, ...：一个或多个速度曲线函数，用于控制过渡的不同阶段。

属性值如下表所示：

属性值	说明
linear	线性过渡，也就是均匀过渡
ease	平滑过渡，过渡的速度会逐渐慢下来
ease-in	由慢到快，也就是逐渐加速
ease-out	由快到慢，也就是逐渐减速
ease-in-out	由慢到快，再到慢，也就是先加速再减速
cubic-bezier(x1,y1,x2,y2)	特定的贝塞尔曲线类型，由于这种曲线太复杂了，这里不过多描述

5，组合使用

实际应用中也可以简写，简写的语法格式如下：

selector {    /*selector是选择器*/
  transition: property duration timing-function delay;
}

transition 属性的简写顺序是可以调整的，但需要注意的是，调整顺序可能会影响过渡效果的一致性和可读性。在实际应用中，建议按照以下顺序来保持一致性：

transition-property
transition-duration
transition-timing-function
transition-delay

这个顺序与各个属性在单独声明时的顺序相同，也符合大多数开发者的阅读习惯。按照这个顺序书写可以确保代码的清晰性和易于理解。

三，动画（animation）

使用CSS3实现动画效果需要两个过程，分别是定义关键帧和引用关键帧。首先介绍关键帧的定义方法。

1，关键帧

在实现Animation动画时，需要先定义关键帧，定义关键帧的语法格式如下：

  @keyframes animation-name{ <keyframs-blocks> };

animation-name：定义一个动画名称，该动画名称将用来被animation-name属性（指定动画名称属性）所使用。
<keyframs-blocks>：定义动画在不同时间段的样式规则。该属性值包括以下两种形式：

第一种方式为使用关键字from和to定义关键帧的位置，实现一个状态过渡到另一个状态，语法格式如下：
```
from{
    属性1：属性值1；
    属性2：属性值2；
    ...
    属性n：属性值n；
}

to{
    属性1：属性值1；
    属性2：属性值2；
    ...
    属性n：属性值n；
}
```
例如定义一个名称为opacityAnim的关键帧，用于实现从完全透明到完全不透明的动画效果，可以使用以下的代码:
```
@keyframes opacityAnim{
    from{opacity:0;}
    to{opacity:1;}
}
```

第二种方式为使用百分比定义关键帧的位置，通过实现百分比来指定过渡的各个状态。语法格式如下:

百分比1{
    属性1：属性值1；
    属性2：属性值2；
    ...
    属性n：属性值n；
}

百分比n{
    属性1：属性值1；
    属性2：属性值2；
    ...
    属性n：属性值n；
}

例如定义一个名称为complexAnim的关键帧，用于实现将对象从完全透明到完全不透明，再逐渐收缩到80%，最后再从完全不透明过渡到完全透明的动画效果，可以使用如下代码：

@-webkit-keyframes complexAnim{
    0%{opacity:0;}
    20%{opacity:1;}
    50%{-webkit-transform：scale(0.8);}
    80%{opacity:1;}
    100%{opacity:0;}
}

在指定百分比时，一定要加“%”，如0%、50%和100%等。

2，动画属性

要实现Animation动画，在定义了关键帧以后，还需要使用动画相关属性来执行关键帧的变化。CSS3为Animation动画提供如下表所示的九个属性：

属性	属性值	说明
animation	复合属性。以下属性的值的综合	指定对象所应用的动画特效
animatio-name	name	指定对象所应用的动画名称
animation-duration	time+单位 s (秒)	指定对象动画的持续时间
animation-timing-function	其属性值与transition-timing-function属性值相关	指定对象动画的过渡类型
animation-delay	time+单位 s (秒)	指定对象动画的延迟的时间
animation-iteration-count	number 或 infinite(无限循环)	指定对象动画的循环次数
animation-direction	normal(默认值，表示正常方向) 或 altermate(表示正常与反向交替)	指定对象动画在循环中是否反向运动
animation-play-state	running (默认值，表示运动) 或 paused (表示暂停)	指定对象动画的状态
animation-fill-mode	none：表示不设置动画之外的状态，默认值； forwards：表示设置对象状态为动画结束时的状态； backwards：表示设置对象状态为动画开始时的状态； both：表示设置对象状态为动画结束或开始的状态	指定对象动画的时间之外的状态

设置动画属性时，可以加更多个动画属性值写在一行里，例如下面的代码：

.mr-in{
    animation-name: lun;
    animation-duration: 10s；
    animation-timing-function: linear；
    animation-direction: normal；
    animation-iteration-count: infinite；
}

上面的代码中设置的动画属性中的动画名称、动画持续时间、动画速度曲线、动画运动方向以及动画播放次数，如果将这些属性写在一起，代码如下：

.mr-In{
   animation: lun 10s linear infinite normal；
}

实例：通过 Animation 属性可以实现购物商城中商品详情里滚动播出广告，具体实现步骤如下：

（1）新建一个HTML 文件，通过<p>标签添加广告文字，关键代码如下：


<div class="mr-contont">
  <div class="mr-news">
    <img src="../img/手机背景.jpg">
    <div class="mr-p">
      <p>小米年度盛典</p>
      <p>惊喜连连</p>
      <p>新品手机震撼上市</p>
      <p>折扣多多</p>
      <p>不容错过</p>
      <p>惊喜购机有好礼</p>
      <p>满减优惠</p>
      <p>神秘幸运奖</p>
      <p>雷军等你带回家</p>
    </div>
  </div>
</div>

（2）新建一个 CSS3 文件，通过外部样式引入 HTML文件，通过 Animation 属性实现滚动播出广告，关键代码如下：

  .mr-p{
    height: 30px;             /*设置高度*/
    margin-top: 0;            /*设置外边距*/
    text-align: right;        /*设置文本出现在浏览器右侧*/
    padding-right: 400px;     /*设置右侧边距*/
    color: #333;              /*设置字体颜色*/
    font-size: 24px;          /*设置字体大小*/
    animation: lun 10s linear infinite; /*设置动画*/
  }

  @-webkit-keyframes lun{   /*通过百分比指定过渡各个状态时间*/
    0%{margin-top: 0;}
    10%{margin-top: -30px;}
    20%{margin-top: -60px;}
    30%{margin-top: -90px;}
    40%{margin-top: -120px;}
    50%{margin-top: -150px;}
    60%{margin-top: -180px;}
    70%{margin-top: -210px;}
    80%{margin-top: -240px;}
    90%{margin-top: -270px;}
    100%{margin-top: -310px;}
  }
img{
  height: 780px;
  width: 1450px;
}

（3）运行之后可以看到这段文字浮动到页面中间部分会停止浮动，如果想要一直浮动到浏览器顶部，可以这样修改CSS部分代码：

@keyframes lun {   /* 通过百分比指定过渡各个状态时间 */
  0% { transform: translateY(0); }
  100% { transform: translateY(-3000px); } /* 假设您的页面高度是3000px */
}

运行之后，这些文字会不断向上浮动，实现一个动画效果：

● 实现CSS3中的动画效果时，需要在页面中添加块级标签<div>，并且设置其溢出内容显示为隐藏(overflow:hidden;)，然后在其内部嵌套一个块级标签，用来添加动画内容（例如上面实例中的滚动文字）。

lemon懵懵

关注

16
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录