用纯css做环形进度条
来源:互联网 发布:2017网络教育多少钱 编辑:程序博客网 时间:2024/06/06 01:02
效果如下:
先来讲一下原理吧,说先画一个圆环,圆环的画法有很多,就不说了。然后用clip切掉一半的圆环。clip怎么用?一、clip属性必须和定位属性postion一起使用才能生效。二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,rect ( number number number number ) : 依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪切 。
切了一半然后怎么办?怎么让它显示少于50%的情况?
在切掉的那一边放一个矩形的遮罩层,然后用rotate把半圆环进行旋转,即能得到小于50%的了。
半个是很简单,那整个的呢?这个就需要比较扎实的css3功底了。我也是在看了大神的代码后才豁然开朗。
先贴代码:
<!-- Author: Meta Luo Date: 2015/10/15--><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .wrapper { width: 100px; /* Set the size of the progress bar */ height: 100px; position: absolute; /* Enable clipping */ clip: rect(0px, 100px, 100px, 50px); /* Hide half of the progress bar */ } /* Set the sizes of the elements that make up the progress bar */ .circle { width: 80px; height: 80px; border: 10px solid green; border-radius: 50px; position: absolute; clip: rect(0px, 50px, 100px, 0px); } /* Using the data attributes for the animation selectors. */ /* Base settings for all animated elements */ div[data-anim~=base] { -webkit-animation-iteration-count: 1; /* Only run once */ -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */ -webkit-animation-timing-function:linear; /* Linear animation */ } .wrapper[data-anim~=wrapper] { -webkit-animation-duration: 0.01s; /* Complete keyframes asap */ -webkit-animation-delay: 3s; /* Wait half of the animation */ -webkit-animation-name: close-wrapper; /* Keyframes name */ } .circle[data-anim~=left] { -webkit-animation-duration: 6s; /* Full animation time */ -webkit-animation-name: left-spin; } .circle[data-anim~=right] { -webkit-animation-duration: 3s; /* Half animation time */ -webkit-animation-name: right-spin; } /* Rotate the right side of the progress bar from 0 to 180 degrees */ @-webkit-keyframes right-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(180deg); } } /* Rotate the left side of the progress bar from 0 to 360 degrees */ @-webkit-keyframes left-spin { from { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); } } /* Set the wrapper clip to auto, effectively removing the clip */ @-webkit-keyframes close-wrapper { to { clip: rect(auto, auto, auto, auto); } } </style></head><body> <div class="wrapper" data-anim="base wrapper"> <div class="circle" data-anim="base left"></div> <div class="circle" data-anim="base right"></div> </div></body></html>
可以看到,他采用了两个半圆环,让两个圆环在前3s一起转出来,然后在第3s时让一个圆环进行anmation-delay,另外用0.01s让遮罩层被裁掉,对的用clip。
然后后面的3s让另一个半圆环再转过来,就实现了整个动画过程。
不要整个?按比例换算下时间就够了~~
0 0
- 用纯css做环形进度条
- jQuery+CSS实现环形进度条
- 进度条动画(纯css)
- [纯css]win8环形等待动画
- 纯DIV+CSS百分比进度条
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯DIV+CSS实现进度条
- 环形进度条
- 环形进度条
- 几款漂亮的纯css进度条
- 纯CSS实现手机信号样式的进度条
- 学习使用CSS做进度条
- 纯css做的开关
- List.subList用法,以及多个LIST<T>相加问题解决方案
- 万科宝能大战折射出IT互联网界技术与资本的危机
- linux uid备忘
- MessageDigest之MD5加密
- 求大神帮忙啊!!!!!!!!!!!!!!!!!!!
- 用纯css做环形进度条
- 数据库索引
- python 简易ss端口管理器
- 去掉数据库中date类型的日期数据导出到Excel后多余的 0:00:00
- 关于多媒体流
- 在Eclipse中导出.war包
- js正则表达式语法
- 使用中文域名的优缺点分析
- JavaScript练习三之简易表格排序