CSS动画

最新推荐文章于 2024-10-07 19:39:47 发布

叶子yes

最新推荐文章于 2024-10-07 19:39:47 发布

阅读量120

点赞数 3

分类专栏： css3 文章标签： css 动画 css3 前端

本文链接：https://blog.csdn.net/lq313131/article/details/126021323

版权

css3 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

本文深入探讨了CSS中的动画和2D转换。通过示例代码详细解释了`animation`属性，包括动画名称、持续时间、速度曲线、延迟、播放次数、方向和填充模式。还介绍了关键帧`@keyframes`的使用方法。此外，文章讲解了2D转换如旋转、平移和缩放，以及形变中心点和旋转轴向的概念。同时，展示了`perspective`属性如何实现近大远小的3D透视效果。

摘要由CSDN通过智能技术生成

动画animation的一些属性

<!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{
      width: 100px;
      height: 100px;
      background-color: red;
      /* 动画配置 */
      /* 设置动画名称 */
      animation-name: leftToRight;
      /* 设置动画持续时间 */
      animation-duration: 3s;
      /* 设置动画执行速度 */
      animation-timing-function: linear;
      /* 设置动画等待时长 */
      animation-delay: 2s;
      /* 设置动画播放次数 n 和 infinite*/
      animation-iteration-count: 1;
      /* 设置动画是否反向播放 alternate反向播放
		normal  默认的取值, 执行完一次之后回到起点继续执行下一次
    	alternate  往返动画, 执行完一次之后往回执行下一次
    	reverse 反向执行 
	  */
      animation-direction: alternate;
      /* 动画不播放或者等待时长应用的样式
		none: 不做任何改变
    	forwards: 让元素结束状态保持动画最后一帧的样式
    	backwards: 让元素等待状态的时候显示动画第一帧的样式
    	both: 让元素等待状态显示动画第一帧的样式, 让元素结束状态保持动画最后一帧的样式
 	 */
      animation-fill-mode: forwards;
      /* 简写  animation:动画名称 动画时长;*/
      /* animation：动画名称 持续时间 运动曲线(匀速linear) 何时开始 播放次数(无限infinite ) 是否反方向(逆播放alternate) 动画起始或者结束的状态(保持forwards/回到起始backwards); */
      /* animation: name duration timing_function delay iteration_count direction fill_mode; */
    }
    div:hover{
      /* 设置动画是否暂停 paused暂停 running执行*/
      animation-play-state: paused;
    }
    /* 动画关键帧 可以使用0%-100%，也可以使用from-to关键字*/
    @keyframes leftToRight {
        /* 开始 中间过程 结束状态 */
        0%{
          margin-left: 0px;
        }
        25%{
          margin-left: 150px;
        }
        50%{
          margin-left: 250px;
        }
        100%{
          margin-left: 350px;
        }
      }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

animate.css

https://animate.style/

1.引入animate的cdn或本地animate.css文件

<link href="https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.min.css" rel="stylesheet">

2.给指定元素加入class"animate__animated <动效名称>"

<div class="animate__animated animate__fadeInUpBig">你好 animate</div>

2D转换

transform 属性向元素应用从2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或者倾斜。

-旋转 rotate

transform: rotate(45deg);
其中deg是单位, 代表多少度

-平移 translate

transform: translate(100px, 0px);
第一个参数:水平方向
第二个参数:垂直方向

-缩放 scale

transform: scale(1.5);
transform: scale(0.5, 0.5);
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数

综合转换连写格式

transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);

/*
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的,按照旋转之后的角度进行平移
*/

形变中心点

transform-origin:
第一个参数:水平方向
第二个参数:垂直方向

注意点
取值有三种形式
具体像素
transform-origin: 200px 0px;
百分比
transform-origin: 50% 50%;
transform-origin: 0% 0%;
特殊关键字
transform-origin: center center;
默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

旋转轴向

-默认情况下所有元素都是围绕Z轴进行旋转
transform: rotateZ(45deg);
围绕z轴旋转
transform: rotateX(45deg);
围绕x轴旋转
transform: rotateY(45deg);
围绕y轴旋转
-总结:
想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可

perspective

属性定义3D元素距视图的距离，以像素计，该属性允许改变3D元素查看3D元素的视图，当为元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身

1.什么是透视
近大远小
2.注意点
一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

下面演示一下上面的效果：

<!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;
      list-style: none;
    }
    ul{
      width: 500px;
      height: 700px;
      border: 1px solid;
      margin: 50px auto;
    }
    ul li{
      width: 100px;
      height: 50px;
      background-color: pink;
      margin: 50px auto;
    }
    ul li:nth-child(2){
      /* deg角度单位 */
      /* 旋转45度 */
      /* 沿着中心旋转 */
      transform: rotate(45deg);
    }
    ul li:nth-child(3){
      /* 设置平移 水平方向 垂直方向 */
      transform: translate(100px,50px);
    }
    ul li:nth-child(4){
      /* 设置缩放 默认1 >1放大 <1缩小*/
      /* 参数两个 水平 垂直 */
      transform: scale(0.5,2);
    }
    ul li:last-child{
      transform: rotate(60deg) translate(150px) scale(2);
    }
  </style>
</head>
<body>
  <ul>
    <li>无</li>
    <!-- 旋转 -->
    <li>rotate</li>
    <!-- 平移 -->
    <li>translate</li>
    <!-- 缩放 -->
    <li>scale</li>
    <li>综合</li>
  </ul>
</body>
</html>

在这里插入图片描述
perspective 属性：

<!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>
    .parent{
      width: 300px;
      height: 300px;
      border: 1px solid;
      margin: 100px auto;
      perspective: 500px;
    }
    .child{
      width: 300px;
      height: 300px;
      background-color: red;
      transition: 2s;
      
    }
    .child:hover{
      transform: rotateX(45deg);
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
</html>