CSS 实现加载动画(最简单实现)
一.源码
<!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>
</head>
<style>.rotate-animation {width: 100px;height: 100px;border: 16px solid #f3f3;border-top: 16px solid #f33;border-radius: 50%;animation: rotate 1s ease-in infinite;}.rotate-animation.fill-color {margin-left: 20px;border-color: #2842d8 #d1b516 #cf4928 #27c965;}@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}
</style><body><div class="rotate-animation"></div><div class="rotate-animation fill-color"></div>
</body></html>
二、实现:
css的border属性和border-radius属性
笔者在前面的文章中也分享过了如何利用border
来实现不同的形状, 比如三角形, 如下为原理图:
利用这个原理我们只要把元素的border-radius
设置为圆形(比如50%), 我们是不是就能实现一个饼图了呢? 我们来看看效果:
以上是设置一个边的border-color
的样子和设置四个边的border-color
的样子, 所以说实现饼图用css
就够用了. 代码如下:
.rotate-animate {border:100px solid #f3f3f3;border-radius:50%;border-top:100px solid #2842d8;
}
如果你想实现不同比例的饼图, 其实只要合理计算好border-width
即可, 有了以上知识, 我们结合animation
动画是不是可以实现下面的加载动画了?
css
代码如下:
.rotate-animate {border:100px solid #f3f3f3;border-radius:50%;border-top:100px solid #2842d8;animation:rotate 2s linear infinite;
}
@keyframes rotate{0%{transform: rotate(0deg);}100%{transform:rotate(360deg);}
}
我们在做css3
动画时经常会用到transform
和 animation
, 所以建议大家把这两个属性掌握.
补充:如果要实现扇形, 是不是也很简单了?
实现更优雅的圆环加载动画
有了以上的css
知识, 我们再来思考一下, 如何用最简短的代码实现一个圆环呢? 其实也很简单, 我们在上面用到了圆角和border
来做圆形和饼图, 如果我们设置一个元素的宽度width
和高度height
, 并且背景透明(transparent), 会怎么样呢, 我们来看看:
代码如下:
.rotate-animate {border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #2842d8;width:100px;height:100px;
}
那么我们做圆环加载动画, 就非常简单了, 利用上面写的旋转动画, 我们来看看效果:
圆环加载动画的整代码如下:
<style>.rotate-animate {border:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #2842d8;width:100px;height:100px;animation:rotate 2s linear infinite;}.rotate-animate.fill-color {margin-left: 20px;border-color: #2842d8 #d1b516 #cf4928 #27c965;}@keyframes rotate{0%{transform: rotate(0deg);}100%{transform:rotate(360deg);}}
</style>
<!-- html -->
<div class="rotate-animate"></div>
<div class="rotate-animate fill-color"></div>
CSS 实现加载动画(最简单实现)相关推荐
- CSS 实现加载动画之四-圆点旋转
原文:CSS 实现加载动画之四-圆点旋转 圆点旋转也是加载动画中经常用到的.其实现方式和菊花旋转一样,只不过一个是线条形式,一个是圆点形式.圆点按照固定的旋转角度排列,加上延时的改变透明度的动画就可以 ...
- CSS 实现加载动画之一-菊花旋转
CSS 实现加载动画之一-菊花旋转 原文:CSS 实现加载动画之一-菊花旋转 最近打算整理几个动画样式,最常见的就是我们用到的加载动画.加载动画的效果处理的好,会给页面带来画龙点睛的作用,而使用户愿意 ...
- css光盘转动,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 C ...
- CSS 实现加载动画之五-光盘旋转
今天做的这个动画叫光盘旋转,名字自己取的.动画的效果估计很多人都很熟悉,就是微信朋友圈里的加载动画.做过前面几个动画,发现其实都一个原理,就是如何将动画的元素如何分离出来.这个动画的实现也很简单,关键 ...
- 使用HTML+CSS制作加载动画
简单的页面加载动画 html部分 <!DOCTYPE html> <html><head><meta charset="utf-8" /& ...
- 【动画消消乐】HTML+CSS 自定义加载动画 068
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
- 【动画消消乐】HTML+CSS 自定义加载动画 064(currentColor的妙用!)
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专 ...
- 【动画消消乐】HTML+CSS 自定义加载动画 065
前言 Hello!小伙伴! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 自我介绍 ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计 ...
最新文章
- 关于mpvue音乐小程序github仓库设置私有的声明
- junit测试设置不回滚_正确设置JUnit测试名称
- centos7安装MongoDB(亲测)
- 类与对象的关系 java 1615134802
- FreeRTOS源码分析与应用开发02:任务管理
- 强连通图------(1)通过两次DFS或BFS判断是不是强连通图
- ubuntu下caffe的FCN8模型训练
- 介绍一些有趣的MySQL pager命令
- autocad java api,autocad接口api
- WireShark抓包后数据分析
- 9、ffplay音频的波谱图及频谱图源码分析
- 图片、照片相似度批量对比
- 联手华为,北京联通在北京打造不一样的5G慧生活!
- 大话设计模式之爱你一万年:第三章 创建型模式:工厂模式:我想让你坐在宝马里笑:1.工厂模式概念
- Win7 配置 Git 客户端 图文详解
- OpenCV:02基础知识和绘制图形
- Linux运维学习:中级进阶(2)——Linux企业常用服务(SSH、DHCP、FTP、NFS、DNS)
- Windows下压缩和解压命令
- 通达OA二次开发 对通达2015版微信查询用户信息模块升级开发(图文)
- MAC抹盘重装详细教程