巧用Css圆角实现有点意思的加载动画

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

 [[359702]]

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

如果想学习更多css实用技巧, 可以参考笔者以下的文章:

 

手撸一个在线css三角形生成器

[[359703]]

轻松使用纯css3打造有点意思的故障艺术

使用css3实现一个类在线直播的队列动画 

css的border属性和border-radius属性

笔者在前面的文章中也分享过了如何利用border来实现不同的形状, 比如三角形, 如下为原理图:


利用这个原理我们只要把元素的border-radius 设置为圆形(比如50%), 我们是不是就能实现一个饼图了呢? 我们来看看效果:


以上是设置一个边的border-color的样子和设置四个边的border-color的样子, 所以说实现饼图用css就够用了. 代码如下:

  1. .rotate-animate { 
  2.     border:100px solid #f3f3f3; 
  3.     border-radius:50%; 
  4.     border-top:100px solid #2842d8; 

如果你想实现不同比例的饼图, 其实只要合理计算好border-width即可, 有了以上知识, 我们结合animation动画是不是可以实现下面的加载动画了?

图片

css代码如下:

  1. .rotate-animate { 
  2.     border:100px solid #f3f3f3; 
  3.     border-radius:50%; 
  4.     border-top:100px solid #2842d8; 
  5.     animation:rotate 2s linear infinite; 
  6. @keyframes rotate{ 
  7.     0%{ 
  8.         transform: rotate(0deg); 
  9.     } 
  10.     100%{ 
  11.         transform:rotate(360deg); 
  12.     } 

我们在做css3动画时经常会用到transform 和 animation, 所以建议大家把这两个属性掌握.

  • 补充:如果要实现扇形, 是不是也很简单了?

实现更优雅的圆环加载动画

有了以上的css知识, 我们再来思考一下, 如何用最简短的代码实现一个圆环呢? 其实也很简单, 我们在上面用到了圆角和border来做圆形和饼图, 如果我们设置一个元素的宽度width和高度height, 并且背景透明(transparent), 会怎么样呢, 我们来看看:

 

代码如下:

  1. .rotate-animate { 
  2.     border:16px solid #f3f3f3; 
  3.     border-radius:50%; 
  4.     border-top:16px solid #2842d8; 
  5.     width:100px; 
  6.     height:100px; 

那么我们做圆环加载动画, 就非常简单了, 利用上面写的旋转动画, 我们来看看效果:

图片

圆环加载动画的整代码如下:

  1. <style> 
  2.     .rotate-animate { 
  3.         border:16px solid #f3f3f3; 
  4.         border-radius:50%; 
  5.         border-top:16px solid #2842d8; 
  6.         width:100px; 
  7.         height:100px; 
  8.         animation:rotate 2s linear infinite; 
  9.     } 
  10.     .rotate-animate.fill-color { 
  11.         margin-left: 20px; 
  12.         border-color: #2842d8 #d1b516 #cf4928 #27c965; 
  13.     } 
  14.     @keyframes rotate{ 
  15.         0%{ 
  16.             transform: rotate(0deg); 
  17.         } 
  18.         100%{ 
  19.             transform:rotate(360deg); 
  20.         } 
  21.     } 
  22. </style> 
  23. <!-- html --> 
  24. <div class="rotate-animate"></div> 
  25. <div class="rotate-animate fill-color"></div> 

我们利用此特性还可以实现更多有意思的图案和加载动画, 大家可以细细品尝. 笔者这里推荐2篇比较使用的css文章:

 

 

责任编辑:姜华 来源: 趣谈前端
相关推荐

2022-01-28 09:01:49

架构

2021-08-05 23:09:53

前端程序员CSS

2022-01-13 07:04:54

CSS 技巧Loading 动画

2023-06-27 09:33:15

Loading 动画CSS

2022-02-16 08:21:28

CSS三角边框动画SVG

2023-04-04 08:14:17

CSSloading 动画

2021-11-03 17:10:37

CSS sticky前端代码

2010-09-14 12:58:41

DIV+CSS圆角

2017-04-27 14:05:59

CSS动画前端

2022-08-11 09:30:52

transitionCSS

2021-08-30 06:20:39

CSS 技巧3D 效果

2021-11-15 07:45:06

CSS 技巧背景光动画

2021-03-09 07:37:41

DHCP协议地址

2022-04-12 07:37:08

CSS滚动视差效果前端

2022-08-29 17:39:53

应用开发css动画

2023-06-05 09:28:32

CSS渐变

2010-08-26 16:19:41

DIV圆角

2024-03-20 09:40:27

动画技巧CSS逐帧动画

2012-03-02 10:50:20

jQuery

2024-07-04 11:25:34

点赞
收藏

51CTO技术栈公众号