文档章节

css实现圆形倒计时效果

o
 osc_sg74u54s
发布于 07/08 16:23
字数 424
阅读 31
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

实现思想:

1.最外层包裹内部的div1(.box)

2.内部左右两边div2(.left_box和.right_box),宽度为div1的一半,通过overflow:hidden隐藏其内部的div

3.在左右两个div2中各有一个div3(.left_item和.right_item),div3在div2中旋转,旋转超出div2后被隐藏实现倒计时的效果

4.遮罩div4(.mask),用来遮住中心部分,形成进度“条”的效果

 

css代码:

    .box{
      /* 最外层的盒子 */
      width:200px;
      height:200px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      border-radius: 50%;
background-color: pink; } .left_box,.right_box{ /* 左右两边用于 隐藏 旋转的div的盒子 通过overflow来隐藏内部div旋转出去的部分 */ position: absolute; top: 0; width:100px; height:200px; overflow: hidden; z-index: 1; } .left_box{ left: 0; } .right_box{ right: 0; } .left_item,.right_item{ /*
这是需要旋转的div(没有被mask遮盖展示出来的部分作为倒计时的线条)
为了方便理解,下面用deeppink和cyan分别设置了左右两边div的颜色



*/ width: 100px; height: 200px; } .left_item{ /* 1.设置圆角,圆角大小为高度的一半 2.这只旋转的中心店,这是左边圆,中心点设置到右边中心点,右边圆则设置到左边中心点 */ border-top-left-radius: 100px; border-bottom-left-radius: 100px; -webkit-transform-origin: right center; transform-origin: right center; -webkit-animation: loading_left 3s linear; background-color: deeppink; } .right_item{ border-top-right-radius: 100px; border-bottom-right-radius: 100px; -webkit-transform-origin: left center; transform-origin: left center; -webkit-animation: loading_right 3s linear; background-color: cyan; } .mask{ /* 遮住div多余的部分,呈现出线条的效果 */ position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; z-index: 2; border-radius: 50%; background-color: #fff; } @-webkit-keyframes loading_left{ 0%{ -webkit-transform: rotate(0deg); } 50%{ -webkit-transform: rotate(0deg); } 100%{ -webkit-transform: rotate(180deg); } } @-webkit-keyframes loading_right{ 0%{ -webkit-transform: rotate(0deg); } 50%{ -webkit-transform: rotate(180deg); } 100%{ -webkit-transform: rotate(180deg); } }

html代码:

<div class="box">
   <div class="left_box">
     <div class="left_item"></div>
   </div>
   <div class="right_box">
     <div class="right_item"></div>
   </div>
   <div class="mask"></div>
 </div>

 

o
粉丝 0
博文 64
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
用vertx实现高吞吐量的站点计数器

工具:vertx,redis,mongodb,log4j 源代码地址:https://github.com/jianglibo/visitrank 先看架构图: 如果你不熟悉vertx,请先google一下。我这里将vertx当作一个容器,上面所有的圆圈要...

jianglibo
2014/04/03
4.1K
3
SQLServer实现split分割字符串到列

网上已有人实现sqlserver的split函数可将字符串分割成行,但是我们习惯了split返回数组或者列表,因此这里对其做一些改动,最终实现也许不尽如意,但是也能解决一些问题。 先贴上某大牛写的s...

cwalet
2014/05/21
9.6K
0
【opencv】图形的绘制

1.矩形图像的绘制: 原函数:void cvRectangle(CvArr* img, CvPoint pt1, CvPoint pt2, CvScalar color, int thickness=1, int line_type=8,int shift=0) img就是需要绘制的图像 pt1 and pt......

其实我是兔子
2014/10/08
1.2K
1
程序猿媛一:Android滑动翻页+区域点击事件

滑动翻页+区域点击事件 ViewPager+GrideView 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。文尾附注源码获取途径。 转载请保留原文出处“http://my.oschina.net/gluoyer...

花佟林雨月
2013/11/09
4.2K
1
CSS Browser Selector

CSS Browser Selector 是一个小的 JS 库,可增强 CSS 的选择器功能,支持根据不同的操作系统和浏览器来编写指定的 CSS 代码,可检测浏览器、浏览器版本、平台、平台版本、设备、设备版本、m...

匿名
2013/01/17
2.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

基于反射实现DBUtils封装(读取数据库数据生成对象或对象集合以及对数据库的CRUD)version2.0

DBUtils version2.0 附带jdbc.properties配置文件 支持操作: 1.加载驱动 2.获取数据库连接对象 3.关闭资源 4.封装通用的更新操作:INSERT UPDATE DELETE 5.封装通用查询单条数据的方法 (JDB...

osc_dh3qbz0a
24分钟前
9
0
标准驼峰命名转数据库字段

碰到一个这样的场景,数据库字段bill_no 代表单据编号,然后返回前端json 是billNo,严格按照驼峰命名法,现在前端需要自定义按照箭头进行排序,但是并不知道数据库字段,所以前端只能给你"...

osc_kvlhvh2u
25分钟前
0
0
突然的立秋

前几天在某app上面耍到说“8月7号就立秋了,等我们再见面就该穿长袖了,不,我们应该不会再见到了”。 就很突然了,今天立秋了。 秋天到了,和夏天的人和事好好道个别吧。 还记得以前,每年的...

osc_z3ivsxnp
27分钟前
8
0
第一届华数杯A题思路分析

** 华数杯a题浅见 需要本文的话请加2574364134 ** 当我刚拿到这个题目的时候,惊呆了,这个不就是2018年国赛的A题吗?2018年的国赛A题是为了进行高温防护,这道题现在就是低温防护服御寒,所...

osc_zken4nb1
27分钟前
0
0
想象自己在前方等自己-纯内心戏

以下为一年级某个时刻的痛苦挣扎,就是个经历而已,记录经历。 论文的初初稿终于在昨天发给了老师。客观的讲我写的真的很差,很多时候感觉自己写不下去了,很多放弃的念头不是一闪而过,而是...

osc_b67rw1ne
29分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部