css画圆, 如何用纯css实现一个动态画圆环效果

最新推荐文章于 2024-06-20 00:04:40 发布
最新推荐文章于 2024-06-20 00:04:40 发布
阅读量3.8w 收藏 18
点赞数 6
分类专栏： css html 文章标签： 动画 transform css3 旋转 css画圆
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xuyunfei_2012/article/details/53672876
版权
css 同时被 2 个专栏收录
5 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏

最终的效果是：用纯css实现动态画圆的动画效果


html结构如下：

<div class="wrap">

<div class="circle"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>

实现的思路就是：

1. 首先定义外层容器大小，本例采用200x200，

    .wrap{
     position: relative;
     width: 200px;
height: 200px;

overflow: hidden;
    }

2. 通过border-radius画一个圆环，这个比较简单

.circle{
height: 100%;
box-sizing: border-box;
border: 20px solid red;
border-radius: 50%;
}

效果如下：


2. 然后用上下两层挡板遮住这个圆环，通过旋转挡板将圆环慢慢露出，过程如下图所示：


通过将下层挡板旋转180deg就能够实现将下半圆慢慢画出的效果，画完以后就需要将其隐藏起来，那该如何实现呢？

这里我用了opacity这个属性，当100%时将其设置为0，同时设置animation-fill-mode: forwards;这样就隐藏了

0%{
transform: rotate( 0 );
}
99%{
transform: rotate( 180deg );
opacity: 1;
}
100%{
transform: rotate( 180deg );
opacity: 0;
}

3. 那如何显示上半圆呢？同样的思路我们对上面挡板进行旋转，通过实际效果我们可以看到，虽然上半圆露出来了，但是确把下半圆给遮挡了。


如何解决这个问题呢？

我们可以在下半圆和挡板间再放一个半圆，同时设置他们的z-index，让上面的挡板旋转时被下半圆遮住，这样就可以了。


说的有些复杂，相当于我们现在有四个元素：上挡板，下挡板，底部的大圆环，一个处在下挡板和大圆环间的半圆。

它们的z-index如下：

上挡板：1

下挡板和底部的大圆间的半圆：2

下挡板：3


为了不增加额外的元素，下挡板和底部的大圆间的半圆我们通过伪元素来实现

.circle:before{
content: '';
position: absolute;
display: block;
width: 100%;
height: 50%;
box-sizing: border-box;
top: 50%;
left: 0;
border: 20px solid red;
border-top: transparent;
border-radius:  0 0 50% 50%/ 0 0 100% 100%;
z-index: 2;
}

4. 组后再结合css3的transform动画就可以了，需要注意的是，上挡板和下挡板动画是同时开始了，所以上挡板的动画要设置一个延时，时长就是下挡板动画的时长


本例用到的知识点如下：

1. 如何画一个圆环

2. 如何画一个半圆

3. css3动画

4. 定位


最终代码如下：


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>动态画一个圆环</title>
    <style>
    *{
    margin: 0; padding: 0;
    }
    .wrap{
    position: relative;
    width: 200px;
height: 200px;

overflow: hidden;
    }
.circle{
height: 100%;
box-sizing: border-box;
border: 20px solid red;
border-radius: 50%;
}
.circle:before{
content: '';
position: absolute;
display: block;
width: 100%;
height: 50%;
box-sizing: border-box;
top: 50%;
left: 0;
border: 20px solid red;
border-top: transparent;
border-radius:  0 0 50% 50%/ 0 0 100% 100%;
z-index: 2;
}
.top, .bottom{
position: absolute;
left: 0px;
width: 100%;
height: 50%;
box-sizing: border-box;
background: white;

}
.top{
top: 0;
z-index: 1;
transform-origin: center bottom;
animation: 1s back-half linear 1s;
animation-fill-mode: forwards;
}
.bottom{
z-index: 3;
top: 50%;
transform-origin: center top;
animation: 1s front-half linear;
animation-fill-mode: forwards;
}
@keyframes front-half{
0%{
transform: rotate( 0 );
}
99%{
transform: rotate( 180deg );
opacity: 1;
}
100%{
transform: rotate( 180deg );
opacity: 0;
}
}
@keyframes back-half{
0%{
transform: rotate( 0 );
}
99%{
transform: rotate( 180deg );
opacity: 1;
}
100%{
transform: rotate( 180deg );
opacity: 0;
}
}
    </style>
</head>
<body>
<div class="wrap">
<div class="circle"></div>
<div class="top"></div>
<div class="bottom"></div>
</div>
</body>
</html>

徐云飞-web
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css+vue实现不完整环的圆环进度条
wei_dan1129的博客
05-19 1609
描述 实现一个border为8px的不完整圆环进度条，小于50%进度条颜色为#97d3ff，大于50%进度条颜色为#0094ff。 原理 画一个宽144px高144px的方形； 方形中画两个等大均分方形的矩形宽72px高144px，(注意每个矩形一定要设置：overflow:hidden)，css中的right left样式； 进度条由两个叠加环形组成，所以第一步的方形中需要画四个等大的矩形用来展示不同部分的环形 under下的rightcircle,leftcircle up下的 rightcircle
css实现圆环效果,利用css实现圆环效果的方法
weixin_39890543的博客
08-03 8358
利用css实现圆环效果的方法发布时间：2020-08-24 10:16:31来源：亿速云阅读：135作者：小新这篇文章将为大家详细讲解有关利用css实现圆环效果的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。css实现圆环效果有多种方法，这里为大家分享五种方法：首先我们来看一下实现效果：接下来为大家介绍方法：1、两个标签的嵌套width: 200px;hei...
css的rotate3d实现炫酷的圆环转动动画
苏苏就是小苏苏的博客
08-28 1万+
css的rotate3d实现炫酷的圆环转动动画
别用图片了，CSS 遮罩合成实现带圆角的环形 loading 动画
Jack, what else can you do besides holding your little darling?
04-10 897
上面的实现虽然很好的满足了需求，但是，还是有些CSS设计问题。比如，我如果需要改变 loading 的颜色，需要改变两个地方。很明显，这样的实现不太符合 DRY（Don't Repeat Yourself）原则。有一个比较简单思路可以用 CSS 变量来传递。loading{这样每次都只需要改变一个变量就行了。除了这种方式以外，其实还有一点需要考虑，为啥背景不能干净一点、纯粹一点呢？换个说法，现在的背景实现对于不了解的同学来讲，可能会很费劲，能否将这些细节隐藏起来，更直观地去自定义颜色呢？
前端 CSS 经典：边框转圈动画效果
最新发布
weixin_64684095的博客
06-20 388
前言：首先我们要知道 css 动画只对数值类的 CSS 属性起作用。要实现边框转圈动画效果，实际就是渐变背景的旋转。但是在以前，渐变背景是不支持动画的。现在我们可以利用浏览器新出的。特别强大，允许开发者干扰浏览器渲染过程。允许开发者在样式代码里面，自己定义样式属性。来实现这个动画效果。
【css3技巧(三)】圆环进度条动画，圆形镂空，静态缺口圆环，优惠券缺口。
前端技术栈
11-01 3444
文章目录一、静态缺口圆环，可多色。二、圆形镂空缺口，或者半圆镂空。三、圆环进度动画。 一、静态缺口圆环，可多色。 效果图： 主要代码： background: conic-gradient(#B9C1F8 0% 25%,#fff 26% 50%,#5979EF 51%,#B9C1F8 100%); 原理: 哈哈，css3锥形渐变写个圆形背景，然后在里面定位一个小点的子级白色背景的元圆。缺口部...
[CSS/JS]圆形不封闭进度条实现
qq_38136543的博客
12-06 1663
圆形不封闭进度条实现 如上图所示，如何实现这种圆形且不封闭的进度条 我的思路是： 首先建立一个div装这个进度条，并将其旋转-120度 将其分为两个相等的div 两边各画一个圆，将圆加上border变成圆环，将一半的圆环颜色置为透明，在外部容器修改成溢出隐藏overflow: hidden;通过旋转达到意图效果，实现进度条底色的显示 再在两边绘制两个圆环，通过让一半圆环透明变成两个半圆环，...
用css画一个空心圆环,使用纯CSS画一个圆环（代码示例）
weixin_33055757的博客
08-04 4805
本篇文章通过代码示例介绍一下使用纯CSS画圆环的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。画圆环思想很简单：首先画两个圆，设置不同的背景色；然后让两个圆的圆心重合即可。难度系数☆☆HTML解析：此处有父容器CSS.container {position: relative;top: 0;left: 0;width: 300px;height: 300px;backgro...
多个扇形元素绕圆旋转
知无涯
10-13 7737
效果图 这种效果有很多方案，最后选择了一个比较简单的方案，就是一个position: relative;的 div 。包裹5个position: absolute;的div。 通过旋转，调整5个div的 top 与 left，而产生弧度，并使中心点都指向圆心。 黄色扇形与文字 都是在5个div内部。 当最外层的圆旋转时，内部的所有元素都跟着旋转。 有一个缺点是，因为是div模拟 72度的 扇形。两两之间会有重叠。 如下 如果要解决这个问题，就需要使用css3的 缩放 transform: skewX(3
css 实现一横排圆点,使用纯CSS怎么实现圆点错觉的效果
weixin_34801390的博客
08-03 558
使用纯CSS怎么实现圆点错觉的效果发布时间：2020-09-14 11:30:40来源：亿速云阅读：75作者：小新这篇文章主要介绍使用纯CSS怎么实现圆点错觉的效果，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！效果预览源代码下载https://github.com/comehope/front-end-daily-challenges代码解读此项目无用户自定义的 dom 元...
html5圆圈动画效果,CSS3实现光感圆圈动画效果
weixin_35890852的博客
06-03 849
CSS3实现光感圆圈动画效果全部代码html>CSS3实现光感圆圈动画效果body{background:#111;}.halo{transition:.4sall;}.halo.input{width:100px;height:100px;}.halo.input:before{width:100px;height:100px;}.ring-1{positi...
纯CSS3实现炫酷大数据圆圈动态发光特效动画
weixin_42541698的博客
10-22 2955
//html <div class="circle-wrap" v-if="isFocusProgress"> <div class="circle"> <div class="big-circle"></div> ...
css圆环的六种实现方式
逝水年华的博客
02-27 4782
1.通过伪类实现 .circle1{ position: relative; width: 80px; height: 80px; line-height: 80px; border-radius: 50%; background: white; ...
CSS实现圆环进度条
热门推荐
时光清浅处，一步一安然
07-18 1万+
该例子是写的固定的进度，你们也可以根据自己的需求变换。首先，我们先看一个静态进度条。其实和静态的是一样的。
css3 绘制画圆、扇形
weixin_33717298的博客
12-01 565
css已经越来越强大了 ，可以使用它来绘制各种简单的形状，用于代替图片显示，这次的分享主要用到画圆，扇形 实现圆形 <div class="circle"></div> <style> .circle { border-radius: 50%; width: 80px; height: 80...
css画圆、半圆、椭圆、圆环
小青头的博客
09-29 9275
css画圆 在css中利用border-radius可以画出我们想要的圆 border-radius属性 可以设置盒子四边的圆弧。从上左，上右，下右，下左顺时针依次设置四个属性 也可以单独设置一个方向如border-radius-top-left 1.css画一个圆 首先我们需要一个正方形盒子，border-radius设置弧度的半径为其边长一半即可 代码如下 <!DOCTYPE html&...
CSS实现带内外边框的圆环
topbo的博客
01-22 1万+
CSS实现带内外边框的圆环 一、需求分析 一个用来展示评分信息带内外边框的圆环，如下图： 二、实现思路（心路历程） 当我看到这个圆环的时候，第一种想法就是可以用两个只具有边框的圆进行覆盖生成，但当时没想清楚，用了一对父子关系的div进行实现，却如何也实现不了。因为内层的div（圆）无法将其边框放置在外层div（圆）的边框之中，在实际页面中就是无法对齐。第二种想法则是yc想出来，
CSS静态百分比圆环图demo
jpjp2020的博客
01-25 3435
详解用CSS3制作圆形滚动进度条动画效果 https://www.cnblogs.com/jr1993/p/4677921.html CSS圆环百分比DEMO  https://www.cnblogs.com/justbeginning/p/7231000.html 这个demo第二个参考的删减无加载动画版本 &lt;div class="circleProgress_wrapper"...
使用css制作一个简易的圆环进度条
wei_dan1129的博客
05-18 756
<!--进度为0%--> <div class="wrap"> <!--大于180，则class=clip-auto circle，否则：circle--> <div class="circle"> <!--度数为：当前进度*3.6--> <div class="percent left" style="transform:rotate(0deg);"></div> &l
css绘制各种形状图形
web前端开发教程htmlcssjs
11-06 1017
虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。 一、实心圆 .circle { width: 120px; height: 120px; background: #8BC34A; border-radius: 100%; } 二、圆环（空心圆） .ring { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值