CSS特效六：加载动画

今天来说一个css特效，在我们搜索东西时，等待的时间很长的时候会有加载动画，其实就是一个css动画。现在我们来实现一个简单的加载动画。

先来看看效果：

它是会转动的那种！

接下来说说实现思路：

首先设置一个圆角为50%（就是一个圆环），设置上下左右的颜色不一样，然后设置animation动画属性，并设置动画名称。不懂的点这里。很快学会炫酷的CSS的animation动画效果。
设置动画的旋转角度为360度就可以了。

最后附上源码：


<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>加载样式</title><style>.loader {border: 16px solid #f3f3f3;border-radius: 50%;border-top: 16px solid blue;border-right: 16px solid green;border-bottom: 16px solid red;border-left: 16px solid pink;width: 120px;height: 120px;/* 动画属性，可以设置周期，延迟等 */-webkit-animation: spin 2s linear infinite;animation: spin 2s linear infinite;}@-webkit-keyframes spin {0% {/* 旋转角度 */-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}/* 关键帧 */@keyframes spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}</style>
</head><body><h2>加载样式</h2><p><strong>注意:</strong> -webkit- 和 -ms- 前缀用于那些不支持 animation 和 transform 属性的浏览器。</p><div class="loader"></div>
</body></html>

CSS特效六：加载动画相关推荐

CSS齿轮转动加载动画
CSS齿轮转动加载动画前言:该动画主要流程分为三块:绘制齿轮,齿轮转动动画,出场动画绘制齿轮绘制齿轮主要是使用svg进行绘制的 <svg class="guaongRudderO ...
纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一.效果图二.步骤 1.html部分 2.css部分前言纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
直播app系统源码通过CSS液体实现加载动画
直播app系统源码通过CSS液体实现加载动画首先我们要让元素能够旋转起来,可以使用transform中的rotate进行2D的360deg旋转. 紧接着我们可以通过CSS变量(–开头的形式)结合an ...
加载html动画logo,仅CSS实现的加载动画 – Loader.css
仅CSS实现的加载动画 – Loader.css 4月 13, 2015 评论 (6) Sponsor 当网页的页面大小较大,用户加载可能需要较长的时间,在这些情况下,我们一般会用到(加载)loadi ...
CSS - 实现Loading加载动画
Loading加载动画用CSS都用实现一个loading的加载动画通过控制 item-loader-container 来实现显示及隐藏 <div class="item-load ...
Nuxtjs上使用wow.js+animate.css实现滚动加载动画
最近做个官网(技术栈使用Nuxt)需要用到滑动到可视区域才触发动画效果,几乎所有的页面都要"动"起来,手写要累死的节奏,赶紧寻找工具!发现wow.js+animate.css可以满 ...
「HTML+CSS」--自定义加载动画【047】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机 ...
「HTML+CSS」--自定义加载动画【027】
前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈自我介绍一下昵称:海轰标签:程序猿一只|C++选手|学生简介:因C语言结识编程,随后转入计算机 ...
wow.js+animate.css实现滚动加载动画
迅雷官网有这种效果: 迅雷网络-关于我们迅雷是全球领先的共享计算与区块链技术创新企业,公司成立于2003年,基于深耕十几年.获得国际专利的P2SP下载加速技术优势,面向个人用户和企业用户打造了丰富的下 ...
css+伪类+加载动画,CSS3 optional伪类兼容实现加载中loading效果 » 张鑫旭-鑫空间-鑫生活...
CSS代码: /* 无限旋转哔哔哔->奥特曼 */ .spin { -webkit-transform: rotate(360deg); -webkit-animation: spin 1s ...

CSS特效六：加载动画

CSS特效六：加载动画相关推荐

最新文章

热门文章