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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何用纯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;

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;

.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>
参考技术A http://www.runoob.com/css3/css3-animations.html

具体我也没试过,但是你可以琢磨一下的~

前端每日实战:152# 视频演示如何用纯 CSS 创作一个圆点错觉效果

技术图片

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/gBwzKR

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/ca82VAM

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

此项目无用户自定义的 dom 元素,利用系统默认的 <body> 元素作为容器。

定义页面尺寸,背景设置为黑色:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
}

用线性渐变画出一横一竖二条灰色的细线:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: 
        linear-gradient(
            to bottom,
            #555 2vmin,
            transparent 2vmin
        ),
        linear-gradient(
            to right,
            #555 2vmin,
            transparent 2vmin
        );
}

用径向渐变在左上角画一个白色的圆点:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: 
        radial-gradient(
            circle at 1vmin 1vmin,
            white 1vmin,
            transparent 1vmin
        ),
        linear-gradient(
            to bottom,
            #555 2vmin,
            transparent 2vmin
        ),
        linear-gradient(
            to right,
            #555 2vmin,
            transparent 2vmin
        );
}

平铺背景:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: 
        radial-gradient(
            circle at 1vmin 1vmin,
            white 1vmin,
            transparent 1vmin
        ),
        linear-gradient(
            to bottom,
            #555 2vmin,
            transparent 2vmin
        ),
        linear-gradient(
            to right,
            #555 2vmin,
            transparent 2vmin
        );
    background-size: 10vmin 10vmin;
}

为避免圆点紧贴在左侧和顶部,为背景增加一点偏移量:

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    background-color: black;
    background-image: 
        radial-gradient(
            circle at 1vmin 1vmin,
            white 1vmin,
            transparent 1vmin
        ),
        linear-gradient(
            to bottom,
            #555 2vmin,
            transparent 2vmin
        ),
        linear-gradient(
            to right,
            #555 2vmin,
            transparent 2vmin
        );
    background-size: 10vmin 10vmin;
    background-position: 5vmin 5vmin;
}

现在,如果视线在页面中移动,就会看到黑色小圆点,这实际上是错觉。

大功告成!

以上是关于如何用纯css实现一个动态画圆环效果的主要内容,如果未能解决你的问题,请参考以下文章

css3百分比圆环怎么画

canvas 画圆的几种方式

在vb中人如何用 shape控件画圆?

如何用matlab中的mesh和surf函数画圆

如何用turtle画一个红色字母A

如何用java实现画图