无js 一个div实现饼图百分比效果动画

·  阅读 2115

正文

是的没错!没有前言了,我们直接上正文。

首先我们来画一个简单的圆

 .pie {
                width: 100px;
                height: 100px;
                margin: 50px auto;

                border-radius: 50%;
                background: yellowgreen;

               
            }

接下来我们给它的一半设置为另一种颜色,即我们的百分比显示的时候要用到的颜色,在pie中添加这样一句话

  background-image: linear-gradient(to right, transparent 50%, #653 0);

通常我们如果要实现百分比显示, 通常要用到另一个div来设置遮罩层。但是我们今天不用, 我们打算使用::before

.pie:before {
                content: '';
                display: block;
                margin-left: 50%;
                height: 100%;

                border-radius:  0 100% 100% 0 / 50%;

                background-color: inherit;

            }

然后就实现了一个遮罩层

黑框部分就是我们用伪元素实现的遮罩层。至于为什么只遮一半部分,往下看。

接下来我们尝试让这个半圆旋转,已达到显示百分比的效果

首先我们把旋转的中心设置到圆心,然后设置旋转角度

即在之前代码中添加以下两行

.pie:before {
    。。。
    transform-origin: 0 50%;
    transform: rotate(.1turn);

 }

transform-origin设置旋转中心, transform:rotate设置旋转角度

接下来我们来实现一个倒计时,这时候我们需要用到animation动画效果 首先要旋转,我们给伪元素设置了background:inherit,让它继承父元素的背景色,那么为了在超过百分之五十的时候继续动画前进,我们就需要在这个时候改变它的背景色。如果说我们给旋转到180 度的时间为3s,那么背景要在3s之后变色。因此我们可以指定以下两个动画函数

@keyframes 
            spin {
                to { transform:  rotate(.5turn);}
            }
            @keyframes bg {
                50% {
                    background: #653;
                }
            }

spin控制旋转, bg控制变色。 现在我们的代码变成

.pie:before {
                content: '';
                display: block;
                margin-left: 50%;
                height: 100%;

                border-radius:  0 100% 100% 0 / 50%;

                background-color: inherit;

                transform-origin: 0 50%;

                animation: spin 50s linear infinite,
                           bg 100s step-end infinite;
               
            }

其余部分保持不变哦,记得。 这样我们就实现了一个完整的百分比 倒计时动画效果。

这里可以给大家延伸一下, animation-delay的一个妙用, 我们可以给它设置一个负值。在animation-delay中有这样一说

一个负的延时是合法的,它意味这动画会立即开始播放,并前进到延时值的绝对值处。
也就是动画跳过指定时间而从中间开始播放

所以我么可以改造我们的代码如下

.pie:before {
                content: '';
                display: block;
                margin-left: 50%;
                height: 100%;

                border-radius:  0 100% 100% 0 / 50%;

                background-color: inherit;

                transform-origin: 0 50%;

                animation: spin 50s linear infinite,
                           bg 100s step-end infinite;
                animation-play-state: paused;  /*  规定动画暂停或者播放   running 播放   paused 暂停*/
                animation-delay: inherit;  /* 规定动画延迟时间从父元素继承 */
            }

这样我们可以通过给div元素pie添加延时已起到显示不同百分比的效果 如

 <div class="pie" style="animation-delay: -20s;"></div>

<div class="pie" style="animation-delay: -60s;"></div>

我们只需要控制要显示多久的时间即可,剩余的颜色变化等一系列东西就可以由css来为我们完成,是不是很简洁很方便呢。(当然,这里如果要有数据变化就要和js交互了哈)

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改