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

徐小夕 等级 964 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深入研究
学习方法推荐 问题学习法:带着问题去学习,有利于集中注意力,目的明确,这既是有意学习的要求,也是发现学习的必要条件。心理学家把注意分为无意注意与有意注意两种。有意注意要求预先有自觉的目的,必要时需经过意志努力,主动地对一定的事物发生注意。它表明人的心理活动的主体性和积极性。问题学习法就是强调有意注意有关解决问题的信息,使学习有了明确的指向性,从而提高学习
css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
巧用css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画. 如果想学习更多css实用技巧, 可以参考笔者以下的文章: <div style"display:flex; flexwrap:wrap; alignitems: center;" <a href"https:/
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
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 以上代码就是举个例子,大部分情况应该都是写一个类,然后整一堆样式进去。 但是这种方式写多了以后,你应该
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
一篇文章带你了解HTML的网页布局结构
大家好,我是IT共享者,人称皮皮。这篇我们来讲讲CSS网页布局。 一、网页布局网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域。 1\. 头部区域头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo:例CSS 项目(runoob.com)body margin: 0;/ 头部样式 /.heade
小白怎么成为一个黑客?按照这个路线来!
大家好,我是周杰伦。接下来我会写系列的文章,给大家整理下网络安全的详细的学习步骤和学习资源推荐。今天的主题是——Web安全。Web安全是网络渗透中很重要的一个组成部分,今天跟大家聊一下,如何在三个月内从零基础掌握Web安全。 第一个月第一周:HTML+CSS,学会网页基本格式,学会编写基本网页,表单,学会用浏览器F12检查元素,查看源码 推荐学习地址: H