学习
实践
活动
工具
TVP
写文章
专栏首页AlbertYang的编程之路5分钟实现漂亮的CSS加载动画,纯CSS实现加载动画

5分钟实现漂亮的CSS加载动画,纯CSS实现加载动画

目录

1 视频

2 知识点

2.1 CSS calc() 函数

2.2 CSS var() 函数

2.3 CSS3 box-shadow 属性

2.4 CSS3 box-sizing 属性

2.5 CSS3 filter(滤镜) 属性

2.6 CSS3动画(animation)

3 参考代码

3.1 HTML

3.2 CSS


1 视频

视频地址:https://www.bilibili.com/video/BV1D5411H7Tc

2 知识点

2.1 CSS calc() 函数

CSS calc() 函数用于动态计算长度值。

语法

calc(expression)

描述

expression

必须,一个数学表达式,结果将采用运算后的返回值。

需要注意的是,运算符前后都需要保留一个空格,例如:width: calc(100% - 10px); 任何长度值都可以使用calc()函数进行计算; calc()函数支持 "+", "-", "*", "/" 运算; calc()函数使用标准的数学运算优先级规则; 支持版本:CSS3

2.2 CSS var() 函数

var() 函数用于插入自定义的属性值,如果一个属性值在多处被使用,可以使用该方法。 支持版本:CSS3

语法

var(custom-property-name, value)

描述

custom-property-name

必需。自定义属性的名称,必需以 -- 开头。

value

可选。备用值,在属性不存在的时候使用。

2.3 CSS3 box-shadow 属性

box-shadow属性可以设置一个或多个下拉阴影的框。

默认值:

none

继承:

no

版本:

CSS3

JavaScript 语法:

object.style.boxShadow="10px 10px 5px #888888"

语法

box-shadow: h-shadow v-shadow blur spread color inset;

注意:boxShadow 属性把一个或多个下拉阴影添加到框上。该属性是一个用逗号分隔阴影的列表,每个阴影由 2-4 个长度值、一个可选的颜色值和一个可选的 inset 关键字来规定。省略长度的值是 0。

说明

h-shadow

必需的。水平阴影的位置。允许负值

v-shadow

必需的。垂直阴影的位置。允许负值

blur

可选。模糊距离

spread

可选。阴影的大小

color

可选。阴影的颜色。

inset

可选。从外层的阴影(开始时)改变阴影内侧阴影

2.4 CSS3 box-sizing 属性

Box-sizing 属性允许你以某种方式定义某些元素,以适应指定区域。

例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。

默认值:

content-box

继承:

no

版本:

CSS3

JavaScript 语法:

object.style.boxSizing="border-box"

语法

box-sizing: content-box|border-box|inherit:

说明

content-box

这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度(最小/最大属性)适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外

border-box

指定宽度和高度(最小/最大属性)确定元素边框。也就是说,对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

inherit

指定 box-sizing 属性的值,应该从父元素继承

2.5 CSS3 filter(滤镜) 属性

filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

默认值:

none

继承:

no

动画支持:

是。

版本:

CSS3

JavaScript 语法:

object.style.WebkitFilter="grayscale(100%)"

CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

提示: 使用空格分隔多个滤镜。

Filter 函数

注意: 滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。

默认值,没有效果。

2.6 CSS3动画(animation)

动画是 CSS3 中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。

动画的基本使用: 1 定义动画 2 调用定义好的动画

定义动画语法

@keyframes 动画名称 {
  0% {
    width: 100px;
  }
  100% {
    width: 200px
  }
}

使用动画语法

div {
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
   animation-duration: 持续时间;
}

动画序列

  • 0% 是动画的开始,100 % 是动画的完成,这样的规则就是动画序列
  • 在 @keyframs 中规定某项 CSS 样式,就由创建当前样式逐渐改为新样式的动画效果
  • 动画是使元素从一个样式逐渐变化为另一个样式的效果,可以改变任意多的样式任意多的次数
  • 用百分比来规定变化发生的时间,或用 from 和 to,等同于 0% 和 100%

动画常见属性

下面的表格列出了 @keyframes 规则和所有动画属性:

动画简写方式

  1. 动画简写方式 /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */ animation: name duration timing-function delay iteration-count direction fill-mode
  2. 知识要点
    • 简写属性里面不包含 animation-paly-state
    • 暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
    • 要想动画走回来,而不是直接调回来:animation-direction: alternate
    • 盒子动画结束后,停在结束位置:animation-fill-mode: forwards
  3. 代码演示 animation: move 2s linear 1s infinite alternate forwards;

速度曲线细节

animation-timing-function: 规定动画的速度曲线,默认是ease。

描述

linear

动画从头到尾的速度是相同的。

ease

默认。动画以低速开始,然后加快,在结束前变慢。

ease-in

动画以低速开始。

ease-out

动画以低速结束。

ease-in-out

动画以低速开始和结束。

cubic-bezier(n,n,n,n)

在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

3 参考代码

3.1 HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>加载动画:公众号AlbertYang</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
    <div class="loader">
      <div style="--x:0"></div>
      <div style="--x:1"></div>
      <div style="--x:2"></div>
      <div style="--x:3"></div>
      <div style="--x:4"></div>
      <div style="--x:5"></div>
    </div>
  </body>
</html>

3.2 CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #edf1f4;
  min-height: 100vh;
}
 
.loader {
  display: flex;
  flex-direction: row;
}
 
.loader div {
  position: relative;
  width: 40px;
  height: 200px;
  margin: 20px;
  overflow: hidden;
  border-radius: 50px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.05), #edf1f4);
  border: 2px solid #edf1f4;
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
    -15px -15px 20px #fff,
    inset -5px -5px 5px rgba(255, 255, 255, 0.5),
    inset 5px 5px 5px rgba(0, 0, 0, 0.05);
}
 
.loader div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  border-radius: 50px;
  box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1),
    -15px -15px 20px #fff,
    inset -5px -5px 5px rgba(255, 255, 255, 0.5),
    inset 5px 5px 5px rgba(0, 0, 0, 0.05);
}
 
.loader div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  box-shadow: inset -5px -5px 5px rgba(0, 0, 0, 0.1),
    0 420px 0 400px #2196f3;
  animation: animate 2.5s ease-in-out infinite;
  animation-delay: calc(var(--x) * -0.3s);
  transform: translateY(160px);
}
 
@keyframes animate {
  0% {
    transform: translateY(160px);
    filter: hue-rotate(0deg);
  }
 
  50% {
    transform: translateY(0px);
    filter: hue-rotate(180deg);
  }
 
  100% {
    transform: translateY(160px);
    filter: hue-rotate(360deg);
  }
}

今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。如果想继续学习提高,欢迎关注我,每天学习进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!

文章分享自微信公众号:
AlbertYang

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:Albert
原始发表时间:2020-12-28
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • CSS 3.0实现加载动画

    越陌度阡
  • css实现页面加载动画

    小小咸鱼YwY
  • CSS实现最简洁的加载动画

    纯CSS能实现的功能越来越多了,能用css实现的就别用js,今天教大家用最短的代码实现下面这个加载动画,这个加载动画的优势不仅是短小,而且不需要额外的dom元素...

    Jean
  • CSS 3.0实现音阶加载中动画

    越陌度阡
  • 纯CSS3实现图片无限旋转加载动画特效

    德顺
  • CSS 3.0实现模拟手机加载动画

    越陌度阡
  • CSS 3.0实现时光轴加载动画

    越陌度阡
  • CSS 3.0实现的加载背景动画(骨架屏)

    在做数据据请求时,通常会为要在展示数据前设置一个加载中的背景动画,以达到更好的用户体验,也就是现在比较流行优化用户体验的骨架屏,下面给大家分享一段代码实现这个效...

    越陌度阡
  • 纯CSS实现简单骨骼动画

    某天设计师来找我说,“这个心愿牌傻傻地挂在那不好看,加个动效呗,就左右摆动一下就行,很简单的!”,我一想,行呀,提升用户视觉体验,开搞。

    Javanx
  • CSS 3.0结合SVG实现水滴穿透加载动画

    越陌度阡
  • 巧用css圆角实现有点意思的加载动画

    作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画.

    徐小夕
  • 纯css实现展开收起动画

    “展开收起”效果是网页中比较常见的一种交互方式,通常的做法是控制display属性值在none和其它值之间切换,虽说功能可以实现,但是效果略显生硬,所以会有这样...

    javascript.shop
  • 仅使用CSS,带你创建一个漂亮的动画加载页面

    利用伪元素、关键帧动画,你将具有强大的创造力,本文就是一个例子。本例中,利用两者,就可以构建一个加载动画,无需任何JS代码和图片。

    疯狂的技术宅
  • 网页|CSS的动画实现

    一些CSS属性是可以实现动画效果,即我们可以用CSS实现动画和过渡。而动画属性的实现其实就是,属性逐渐地从一个值变化到另一个值,比如尺寸大小、数量、百分比和颜色...

    算法与编程之美
  • 【动画消消乐|CSS】083.纯CSS实现卡通齿轮效果

    海轰Pro
  • 前端: 轻松教你使用纯css实现水波动画

    css3给我们前端开发带来了很多便利, 我们可以使用css3 的新特性实现各种形状和动效, 接下来笔者就来带大家介绍如何用css3实现 H5-Dooring编辑...

    徐小夕
  • 纯 CSS 实现漂亮的大标题效果

    夏时
  • 纯CSS3实现loading虚影加载效果

    从效果而言,我们主要实现下列步骤: 1、让一个圆旋转,并且是先快后慢; 2、有颜色过渡效果、并且有透明度; 3、然后就是复制上面的效果,5个,然后按时间执...

    Javanx

扫码关注腾讯云开发者

领取腾讯云代金券