专栏首页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(AlbertYang666),作者:Albert

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css实现页面加载动画

    小小咸鱼YwY
  • CSS 3.0实现音阶加载中动画

    越陌度阡
  • CSS 3.0实现模拟手机加载动画

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

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

    越陌度阡
  • 12个令人惊奇的CSS实验项目 [每日前端夜话(0x1D)]

    你可能认为 CSS 只是一种简单地为网页设计样式的语言,但它的功能比你想象的要多得多。 从逼真的图像到甚至是视频游戏,你会惊讶地看到一个优秀的开发者可以用 CS...

    疯狂的技术宅
  • 仅使用CSS,带你创建一个漂亮的动画加载页面

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

    疯狂的技术宅
  • cssjshtml 弹窗加载动画实现

    葫芦
  • 那些前端常用的网站插件

    这套工具集中的大部分你可能见过,也可能没见过,如果有哪个/些让你眼前一亮,那么我的分享就很值了。 这个列表包含许多种类的资源,所以这里我将它们分组整理。 Jav...

    企鹅号小编
  • 11个最好的JavaScript动态效果库[每日前端夜话0x3E]

    当我想要在网上找一个简洁的 Javascript 动效库时,总是发现很多“推荐”的库都是缺乏持续维护的。

    疯狂的技术宅
  • 10 个最佳 CSS 动画库

    网站地址:http://animista.net/ 网站描述:在线生成 css 动画

    前端小智@大迁世界
  • 「Web Animation API 专题」用原生JS制作一个图片随机移动的动画

    当我们谈及网页动画时,自然联想到的是 CSS3 动画、JS 动画、SVG 动画 等技术以及 jQuery.animate() 等动画封装库,根据实际动画内容设计...

    前端达人
  • 2019年最全的web前端知识体系汇总

    · HTML: https://developer.mozilla.org/zh-CN/docs/Web/HTML

    用户5827212
  • 【工具】977- 10个实现炫酷UI设计效果的CSS生成工具

    英文 | https://mattkarski.medium.com/10-amazing-css-generators-for-ui-design-1f790...

    pingan8787
  • AnimationDrawable 实现正在加载的旋转动画

    要实现这样的效果  就是中间的那个   正在拼命加载数据中  然后是那个动画在不停的旋转,

    wust小吴
  • 纯CSS3实现图片无限旋转加载动画特效

    德顺
  • 「Web Animation API 专题」纯手工撸一个图片随机移动的动画

    当我们谈及网页动画时,自然联想到的是 CSS3 动画、JS 动画、SVG 动画 等技术以及 jQuery.animate() 等动画封装库,根据实际动画内容设计...

    前端达人
  • 30个最优CSS动画案例分享,轻松让网页用户随心而“动”

    CSS或CSS3动画,包括常见的鼠标悬停动画,网页加载动画,页面切换动画,文本动画以及背景动画等等,能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/C...

    奔跑的小鹿
  • 分享本站右侧 “类Metro风格侧边栏” 的实现方法

    本站DeveWork.com 右侧边栏有个“类Metro风格侧边栏”的小工具,半年前的时候微软所带来的“Metro风格”(也叫Modern 风格、Windows...

    Jeff
  • Angular练习之animations动画

    让我们隆重介绍Angular动画。Angular是基于最新的Web Animations API,我们使用动画触发器(animation triggers)来定...

    易兒善

扫码关注云+社区

领取腾讯云代金券