css实现圆形倒计时效果
实现思想:
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:;
width:100px;
height:200px;
overflow: hidden;
z-index:;
}
.left_box{
left:;
}
.right_box{
right:;
}
.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:;
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>
css实现圆形倒计时效果的更多相关文章
- jQuery实现的手机发送验证码倒计时效果代码分享
这是一款基于jquery实现的手机发送验证码倒计时效果代码,可实现实时显示秒数倒计时的功能,还可实现对手机号码格式验证的功能,是一款常用的网站注册发送手机验证码特效代码. 效果描述:注册一个网站,当需 ...
- js实现倒计时效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/htm ...
- 二、JavaScript语言--JS实践--倒计时效果
主要内容:分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. Javascript 日期对象: Date()返回当前的日期和时间 getY ...
- javascript特效实现(4)——当前时间和倒计时效果
这个效果的实现关键是对Date对象和setTimeout的使用. 一共有三个例子,HTML结构如下,就不添加CSS样式了. <body> 当前时间:<p id="p1&qu ...
- jquery网页倒计时效果,秒杀,限时抢购!
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- [jQuery编程挑战]006 生成一个倒计时效果
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="utf-8&quo ...
- 不可思议的纯 CSS 实现鼠标跟随效果
直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...
- 页面倒计时跳转页面效果,js倒计时效果
页面倒计时跳转页面效果,js倒计时效果 >>>>>>>>>>>>>>>>>>>> ...
- 【转载】jquery版的网页倒计时效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- python 的xlrd模块
一.安装 ♦ python官网下载http://pypi.python.org/pypi/xlrd模块安装. ♦或者在cmd窗口 pip install xlrd 二.使用 1.导入模块: imp ...
- sql的日期和时间函数–date_format
Mysql的日期和时间函数–date_format DATE_FORMAT(date,format)依照 format 字符串格式化 date 值.下面的修饰符可被用于 format 字符串中:修 ...
- CentOS7+CDH5.14.0安装全流程记录,图文详解全程实测-3禁止交换和禁用大页面
1.禁止交换(每台机器都要做): 执行命令:vim /etc/sysctl.conf 增加一行:vm.swappiness=0 执行命令:sudo sysctl vm.swappiness=0 2.禁 ...
- 监听端口,获取webService请求报文
第一步下载我们的wsdl文件到本地 第二步建立一个测试webservice工程,把wsdl放在项目里面 第三步把测试webservice中的wsdlLocation改成localhost.....你的 ...
- margin-top / padding-top 的百分比 到底是多少?
之前,我以为 margin-top/padding-top 如果设置成%,得到的是 基于父对象总高度的百分比. 但是,这种想法是错的.因为在CSS标准里,是基于父对象宽度的百分比. <style ...
- Struct2 基础介绍
前面花一周时间学习了servlet+jsp+mysql, 并且简单实现了登录注册等操作.对Servlet应用有了基础了解! 关于Struct2这个经常听说,但是自己没有用过.今天在这学习总结下,目的是 ...
- Taro-ui TabBar组件使用路由跳转
1. 安装taro-ui (此处使用cnpm) cnpm install taro-ui 2. 全局引入样式 app.scss sass :@import "~taro-ui/dist/st ...
- springmvc webservlet 异步请求总结
1:每次请求会启动一个新线程 上边在debug状态下, 每次请求一次,生成一个新的 thread 在此已经是245了 出现一个现象在debug模式下, 每次请求生成的线程,自动在红框那个位置停了下来 ...
- swoole和workerman
作者:韩天峰链接:https://www.zhihu.com/question/47994137/answer/131700752来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- UVa156
#include <bits/stdc++.h> using namespace std; map<string,int> cnt; vector<string> ...