animation基础学习与实现简单loading圆环

青提柚柚

已于 2024-03-06 17:12:57 修改

阅读量819

点赞数 19

分类专栏： css/less/scss 文章标签：前端 html css

于 2024-03-06 17:11:58 首次发布

本文链接：https://blog.csdn.net/qq_41437448/article/details/136502649

版权

css/less/scss 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的动画属性（如animation-name,direction等）、@keyframes动画组、transform转换、transition过渡，以及如何用CSS实现loading圆环效果，为开发者提供了关于这些技术的深入理解和实践指南。

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

一、annimation相关知识

（一）相关属性

animation：是以下八个属性的集合

1.animation-name（绑定的动画名称，可以绑多个，多个名称之间用逗号分隔）

2.animation-direction（播放动画的方向：正/反）

        animation-duration：normal        //正向播放；

        animation-duration：reverse        /反向播放；

        animation-duration：alternate //按照播放次数，奇正偶反；

        animation-duration：alternate-reverse //按照播放次数，奇反偶正；

3.animation-timing-function（动画的速度曲线，表示先快后慢还是先慢后快等播放节奏）

        animation-timing-function: linear //匀速

        animation-timing-function: ease //慢快慢这个属性的默认值

        animation-timing-function: ease-in //慢匀

        animation-timing-function: ease-out //匀慢

        animation-timing-function: ease-in-out //慢匀慢

        animation-timing-function: cubic-bezier(n, n, n, n) // 自定义速度，n的值为0-1

4.animation-delay（动画开始之前的延迟时间）

5.animation-iteration-count（设置动画被播放的次数）

        animation-iteration-count：n //播放n次

        animation-iteration-count：infinite //无数次播放循环播放

6.animation-duration（动画播放一个周期所花费的时间）

7.animation-fill-mode（动画不播放即动画播放前或者播放后的样式状态设置）

        animation-fill-mode：none //在未设置动画之前默认的样式

        animation-fill-mode：forwards //动画运行的最后一帧的样式

        animation-fill-mode：backwards //动画运行的第一帧样式

        animation-fill-mode：both //同时遵循 forwards 和 backwards 的规则？

8.animation-play-state（动画播放状态：暂停/播放）

        animation-play-state：paused //暂停

        animation-play-state：running //播放默认值

（二）@keyframes 动画组

概念：@keyframes 规则用来定义动画各个阶段的属性值

//animationName1 表示这个动画组的名称
@keyframes animationName1 {
    //开始状态
    from {
        properties: value;
    }
    //中间状态 可以写多个
    percentage {
        //表示css的属性（例如宽高margin等），也可以是transform的属性,下面一行是伪代码可替换
        properties: value;
    }
    percentage {
       width:100px;
    }
    //结束状态
    to {
        properties: value;
    }
}

// 也可以用白分比表示 
@keyframes animationName2 {
    //开始百分比
    0% {
        properties: value;
    }
    // 中间过程 可以写多个 按照先后顺序执行
    percentage {
        properties: value;
    }
    percentage {
        properties: value;
    }
    60% {
        properties: value;
    }
    // 结束百分比
    100% {
        properties: value;
    }
}

二、transform相关知识

概念：属性应用于元素的2D或3D转换，描述了元素的静态样式，本身不会呈现动画效果，可以对元素进行旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。

transform: rotate(45deg) //旋转45度

transform:skew(30deg,20deg) //元素翻转扭曲（x,y）

transform: scale(m, n); //缩放（x,y）缩小:m/n<1 放大:m/n >1 不变:m/n=1

transform: translate(100px, 0px); //平移（水平x方向，垂直y方向）

transform: matrix(scale.x , scale.y , translate.x, translate.y) //将多个2D方法组合到一起

// 多属性连写用空格隔开

transform: rotate(45deg) scale(0.5, 0.5) translate(100px, 0px)；

//改变起点位置或者形变中心点

transform-origin: 200px 200px; //（x,y）

transform-origin: center center;

transform-origin: bottom left; //以自己为参考中心点

三、transition相关知识

概念：transition是一个合写属性，表示样式过渡，从一种效果逐渐改变为另一种效果，需要有事件触发契机，通常和hover等事件配合使用

transition:property duration timing-function delay;

例如：transition:width 2s ease 0s;

property //CSS的属性,width height 为none时停止所有的运动,也可以为transform

duration //持续时间

timing-function //ease ease-in linear等

delay //延迟时间

四、css实现loading圆环

（一）实现效果（保留了辅助线）

（二）实现代码

HTML页面

<!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>
    <link rel="stylesheet" href="./loading.css" />
    <style type="css"></style>
  </head>

  <body>
    <div class="loading">
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
      <div class="dot"></div>
    </div>
  </body>
</html>

CSS页面

.loading {
  width: 150px;
  height: 150px;
  margin: 50px auto;
  position: relative;
  border-radius: 50%;
  outline: 1px solid pink;
  /* background-color: pink; */
}

.dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  margin-top: -5px;
  background: red;

}

.dot::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  background: #000;
  top: -100%;

  animation: runCircle 2000ms infinite;
}

.dot::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;

  /* background: pink; */
  top: 100%;
}

// 使每个点绕着自身画圆
@keyframes runCircle{
  from {
    transform: rotate(0deg)translateY(-75px);
  }
  percentage {
     transform: rotate(0deg)translate(75px,75px);
  }
  percentage {
    transform: rotate(0deg)translateY(75px,0px);
  }
  to {
   transform: rotate(360deg) translateY(-75px);
  }
}

// 如果使用scss或者less则可直接用计算方式写，这里用css可以更详细的表示每个阶段的变化
.dot:nth-child(1) {
  // 每个点的初始角度旋转变化 以及大小设置
  transform: rotate(-105deg); 
  width: 6px;
  height: 6px;
}
.dot:nth-child(2) {
  transform: rotate(-90deg);
  width: 8px;
  height: 8px;
}
.dot:nth-child(3) {
  transform: rotate(-75deg);
  width: 10px;
  height: 10px;
}
.dot:nth-child(4) {
  transform: rotate(-60deg);
  width: 12px;
  height: 12px;
}
.dot:nth-child(5) {
  transform: rotate(-45deg);
  width: 14px;
  height: 14px;
}
.dot:nth-child(6) {
  transform: rotate(-30deg);
  width: 16px;
  height: 16px;
}
.dot:nth-child(7) {
  transform: rotate(-15deg);
  width: 18px;
  height: 18px;
}
.dot:nth-child(8) {
  transform: rotate(0deg);
  width: 20px;
  height: 20px;
}

//scss代码
//$n:8;
//$p:-15
//@for $i from 1 through $n {
//  .dot:nth-child(#{$i}) {
//    transform: rotate(#{(120+$i * $p)deg});
//  }
//}

参考链接：

CSS动画（animation）详解_animation css-CSDN博客