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

徐小夕 等级 1260 0 0

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

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

css的border属性和border-radius属性

笔者在前面的文章中也分享过了如何利用border来实现不同的形状, 比如三角形, 如下为原理图: 巧用css圆角实现有点意思的加载动画 利用这个原理我们只要把元素的border-radius 设置为圆形(比如50%), 我们是不是就能实现一个饼图了呢? 我们来看看效果: 巧用css圆角实现有点意思的加载动画 以上是设置一个边的border-color的样子和设置四个边的border-color的样子, 所以说实现饼图用css就够用了. 代码如下:

.rotate-animate {
    border:100px solid #f3f3f3;
    border-radius:50%;
    border-top:100px solid #2842d8;
}

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

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动画时经常会用到transformanimation, 所以建议大家把这两个属性掌握.

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

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

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

代码如下:

.rotate-animate {
    border:16px solid #f3f3f3;
    border-radius:50%;
    border-top:16px solid #2842d8;
    width:100px;
    height:100px;
}

那么我们做圆环加载动画, 就非常简单了, 利用上面写的旋转动画, 我们来看看效果: 巧用css圆角实现有点意思的加载动画

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

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

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

还有一些偏底层的css文章可以参考我之前的文章.

开源项目更新日志

目前H5-Dooring可视化搭建平台还在持续更新, 主要更新如下:

  • 添加地图组件, 可自定义地理位置信息和标注
  • 修复图片库不显示问题
  • 添加日历组件
  • 优化拖拽下载代码功能

巧用css圆角实现有点意思的加载动画(H5编辑器)H5-Dooring | 积木式搭建H5页面

往期推荐

复盘node项目中遇到的13+常见问题和解决方案

如何搭积木式的快速开发H5页面?

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

前端高效开发必备的 js 库梳理

觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!微信搜 “趣谈前端”,发现更多有趣的H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战.

收藏
评论区

相关推荐

CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
前端面试题全覆盖整理
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关 1. 万能居中 1.margin: 0 auto;水平 2.textalign: center;水平 3.行高,垂直 4.表格
好家伙,这些写 CSS 的新姿势你还不知道?
现在大部分搞前端的应该还是这样写 CSS 的: .mock {     margin: auto;     fontsize: 16px;     // ... } <div class'mock'mock</div 以上代码就是举个例子,大部分情况应该都是写一个类,然后整一堆样式进去。 但是这种方式写多了以后,你应该
一篇文章带你了解HTML的网页布局结构
大家好,我是IT共享者,人称皮皮。这篇我们来讲讲CSS网页布局。 一、网页布局网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。 1\. 头部区域头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo:例CSS 项目(runoob.com)body margin: 0;/ 头部样式 /.heade
CSS 右侧固定宽度 左侧自适应 或者 三列布局 左右固定 中间自适应的问题
一: 右侧固定宽度 左侧自适应   第一种方法:左侧用margin-right,右侧float:right  就可以实现。     HTML代码可以如下写:     <div>         <a href="" target="_blank">我是龙恩</a>     </div>   <div>
CSS块级元素与行内元素
**CSS块级元素与行内元素** **行内元素与块状元素** 1、块级元素:可以设置 width, height属性。 行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化。 可以通过line-height设置行高(行高和height是不同的东西)。 2、块级元素:可以设置margin和padd
CSS基本用法介绍
CSS介绍 ===== css定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 ===== ### css实列 每个CSS样式由两个组成部分:选择器和声明。声明又包括属性和属性值。每个声明之后用分号结束。 ### css注释 /*这是注释*/ CSS的几种引入方
CSS开发过程中的20个快速提升技巧
> **摘要:**本文涵盖了20个CSS技巧,可以解决许多工作中常见的问题, 让你也成为一个CSS高手。 1、使用CSS重置(reset) ---------------- css重置库如normalize.css已经被使用很多年了,它们可以为你的网站样式提供一个比较清晰的标准,来确保跨浏览器之间的一致性。 大多数项目并不需要这些库包含的所有规则,可以
43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的,很明显如果单从字面上去理解,DIV+CSS的网页就要全都是div,很明显是无法达到语义化标准的。请把”DIV+CSS”这个词从脑子中删除,用”xHTML+CS
Arcgis api for javascript学习笔记
**Ⅰ. 在3.X版本中,设置Map对象的 "maxScale" 和 "minScale" 属性** -------------------------------------------------- <!DOCTYPE html> <html> <head> <style type="text/css">
Boost(1.69.0) windows入门(译)
<head> <title>缩进2字符</title> <style type="text/css"> .yindent, .yblock{ padding: 1em 1em 0 1em; margin-right:0; } .yindent{ margin:0.7em 2em; border:medium outset; } .yblock{ margin
CSS之border绘制三角形
用CSS的border可以画出高质量的三角形。 我们一般会这么使用border: #test-border { width: 100px; height: 100px; margin: 100px auto; background: #fff; border: 2px
CSS外边距合并导致margin越界的问题
外边距合并其实经常会遇到,这里稍微总结一下,以及一些相关的术语 一、什么是外边距合并?(折叠外边距) 外边距合并指的是当两个**垂直**外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者;而左右外边距不合并。 在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外
DIVcss背景图片固定居中,div阴影,背景半透明,div圆角,DIV渐变 【mark用】
< html \> < head \> < meta http-equiv \="Content-Type" content \="text/html; charset=utf-8" /> < title \> CSS test </ title \> < style type \="text/css" \> body { mar
JS通过ajax + 多列布局 + 自动加载来实现瀑布流效果
Ajax ---- > * 说明:本文效果是无限加载的,意思就是你一直滚动就会一直加载图片出现,通过鼠标滚动距离来判断的,所以不是说的那种加载一次就停了的那种,那种demo下次我会再做一次 > css部分用的是html5+css3的新属性,图片会自动添加到每行的最顶端上去,而不是用js去判断。去除了一些js计算的麻烦。 **css部分:**