圆环倒计时实现(animation版本和transition版本)

MyKyle18

于 2021-03-10 14:54:22 发布

阅读量309

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq_18547381/article/details/114635211

版权

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

1. animation版本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .circle { 
            position:absolute; 
            z-index:1; 
            width:200px; 
            height:200px; 
        }
        .cRight { 
            // clip 属性定义了元素的哪一部分是可见的。clip 属性只适用于 position:absolute 的元素。语法：<shape> = rect(<top>, <right>, <bottom>, <left>)
            clip:rect(0px,200px,200px,100px); 
        }
        .cLeft{ 
            clip:rect(0px,100px,200px,0px); 
        }
        .pie { 
            position:absolute;
            width:200px; 
            height:200px; 
            border-radius:50%; 
            background: transparent;
            box-sizing: border-box;
            border: 20px solid greenyellow;
        }
        .pRight { 
            clip:rect(0px,200px,200px,100px); 
            animation: pieOneMove 5s linear infinite;
        }
        .pLeft { 
            clip:rect(0px,100px,200px,0px); 
            animation: pieTwoMove 5s l

最低0.47元/天解锁文章

MyKyle18

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
圆环倒计时实现(animation版本和transition版本)

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。1. animation版本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title
复制链接

扫一扫