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

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

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)。

Filter	描述
none	默认值，没有效果。
blur(px)	给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。
brightness(%)	给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。
contrast(%)	调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
drop-shadow(h-shadow v-shadow blur spread color)	给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受<shadow>(在CSS3背景中定义)类型的值，除了"inset"关键字是不允许的。该函数与已有的box-shadow box-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。`<shadow>参数如下：` `<offset-x> <offset-y> (必须)` `这是设置阴影偏移量的两个 <length>值. <offset-x> 设定水平方向距离. 负值会使阴影出现在元素左边. <offset-y>设定垂直距离.负值会使阴影出现在元素上方。查看<length>可能的单位. 如果两个值都是0, 则阴影出现在元素正后面 (如果设置了` <blur-radius> and/or `<spread-radius>，会有模糊效果).` `<blur-radius> (可选)` `这是第三个code><length>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利).` `<spread-radius> (可选)` `这是第四个 <length>值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). 注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。` `<color> (可选)` `查看 <color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。`
grayscale(%)	将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
hue-rotate(deg)	给图像应用色相旋转。"angle"一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert(%)	反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。
opacity(%)	转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。
saturate(%)	转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。若值未设置，值默认是1。
sepia(%)	将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；
url()	URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。例如： `filter:url(svg-url#element-id)`:url(svg-url#element-id)
initial	设置属性为默认值。
inherit	从父元素继承该属性。

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 规则和所有动画属性：

动画简写方式

动画简写方式

/* animation: 动画名称持续时间运动曲线何时开始播放次数是否反方向起始与结束状态 */

animation: name duration timing-function delay iteration-count direction fill-mode

知识要点

简写属性里面不包含 animation-paly-state

暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用

要想动画走回来，而不是直接调回来：animation-direction: alternate

盒子动画结束后，停在结束位置：animation-fill-mode: forwards

代码演示

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);}
}

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

5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画相关推荐

CSS 魔法系列：纯 CSS 绘制各种图形《系列五》
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
[css] 能不能使用纯css使你的浏览器卡死？怎么实现？
[css] 能不能使用纯css使你的浏览器卡死?怎么实现? 可以,用计算属性calc,变量个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与 ...
html5制作天气动画背景,CSS icon图标之纯CSS实现带动画效果的天气图标
CSS3动画属性并不是很多,但重点其实是你怎样去运用它,从简单的hover状态或复杂的小动画,都可以巧妙的用CSS3动画属性来实现. 今天主要是和大家分享一个比较有创意.实用的CSS天气图标动画,静态 ...
css 加载图片,纯CSS图片预加载
译自:[Creating a CSS Image Preloader](http://www.devirtuoso.com/2009/07/creating-a-css-image-preloader ...
html页面加载转圈,纯CSS实现加载转圈样式
不同的项目中对于等待加载时转圈圈的样式是不同的,有的是传统的转圈的gif图片,见得比较多的是将转圈圈的换成了可爱的图标.有时候项目中加入等待加载的图片会很违和,不符合美观,所以需要用CSS做一个.下面 ...
css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
css 圆形背景icon_纯CSS绘制漂亮的圆形图案效果
另外一种也可以用CSS简单的实现的形状是圆形.使用border-radius,你可以画出各种漂亮的圆形图案. CSS代码只需要将你的网页元素的每个边的border-radius甚至成50%,你就能得 ...
html css 水平时间轴,纯css+js水平时间轴
自定义,并自动加载时间节点当前时间节点居中,突出显示时间动态无痕添加效果图: 初始状态时间左走到一定2016.1月后 html: + - 对应 JS 设置处理: var left = docu ...
css 风琴,玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果
原标题:玩一下纯 CSS 折腾的一个叫什么手拉风琴的图片展示效果好久没更新的公众号终于更新了,但没有太多内容,主要是也不知道写什么,更关键是已经很久没有写 CSS 的东西了,中午没吃到鸡,就一边观战 ...
android+水滴粘性动画,纯css实现Material Design中的水滴动画按钮
前言大家平时应该经常见到这种特效,很炫酷不是吗这是谷歌Material Design中最常见的特效了,市面上也有很多现成的js库,用来模拟这一特效.但是往往要引入一大堆js和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

5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画相关推荐

最新文章

热门文章