html圆圈倒计时,html5 css3圆形进度条倒计时页面跳转代码
特效描述:html5 css3 圆形进度条 倒计时 页面跳转代码。html5 css3进度条倒计时动画特效
代码结构
1. HTML代码
html5+css3进度条倒计时动画特效
body {
margin: 0;
padding: 0;
background: #E6EAEB;
font-family: Arial, '微软雅黑', '宋体', sans-serif
}
.alert-box {
display: none;
position: relative;
margin: 96px auto 0;
padding: 180px 85px 22px;
border-radius: 10px 10px 0 0;
background: #FFF;
box-shadow: 5px 9px 17px rgba(102,102,102,0.75);
width: 286px;
color: #FFF;
text-align: center
}
.alert-box p {
margin: 0
}
.alert-circle {
position: absolute;
top: -50px;
left: 111px
}
.alert-sec-circle {
stroke-dashoffset: 0;
stroke-dasharray: 735;
transition: stroke-dashoffset 1s linear
}
.alert-sec-text {
position: absolute;
top: 11px;
left: 190px;
width: 76px;
color: #000;
font-size: 68px
}
.alert-sec-unit {
font-size: 34px
}
.alert-body {
margin: 35px 0
}
.alert-head {
color: #242424;
font-size: 28px
}
.alert-concent {
margin: 25px 0 14px;
color: #7B7B7B;
font-size: 18px
}
.alert-concent p {
line-height: 27px
}
.alert-btn {
display: block;
border-radius: 10px;
background-color: #4AB0F7;
height: 55px;
line-height: 55px;
width: 286px;
color: #FFF;
font-size: 20px;
text-decoration: none;
letter-spacing: 2px
}
.alert-btn:hover {
background-color: #6BC2FF
}
.alert-footer {
margin: 0 auto;
height: 42px;
width: 120px
}
.alert-footer-icon {
float: left
}
.alert-footer-text {
float: left;
border-left: 2px solid #EEE;
padding: 3px 0 0 5px;
height: 40px;
color: #0B85CC;
font-size: 12px;
text-align: left
}
.alert-footer-text p {
color: #7A7A7A;
font-size: 22px;
line-height: 18px
}
秒
花个3分钟创建属于您的个人帐号
您将在我们的网站享受更多
立即前往注册
secure
安全加密
function alertSet(e) {
document.getElementById("js-alert-box").style.display = "block",
document.getElementById("js-alert-head").innerHTML = e;
var t = 10,
n = document.getElementById("js-sec-circle");
document.getElementById("js-sec-text").innerHTML = t,
setInterval(function() {
if (0 == t){
location.href="http://www.jq-school.com";
}else {
t -= 1,
document.getElementById("js-sec-text").innerHTML = t;
var e = Math.round(t / 10 * 735);
n.style.strokeDashoffset = e - 735
}
},
970);
}
html圆圈倒计时,html5 css3圆形进度条倒计时页面跳转代码相关推荐
- android欢迎页圆形倒计时,android 欢迎页圆形进度条倒计时功能
常见app欢迎页圆形进度条倒计时功能,可设置显示文字,进度条颜色,宽度,倒计时时间,内圆颜色.设置进度条类型 顺数进度条(0-100)还是倒数进度条(100-0): 先上效果图: 下面介绍实现逻辑: ...
- html5圆圈闪烁,html5 css3圆形波浪百分比加载动画特效
一款简单漂亮的html5 css3圆形波浪百分比加载动画特效,非常好看的波浪滚动上升动画效果,也可用于百分比展示. 查看演示 下载资源: 28 次 下载资源 下载积分: 20 积分 js代码 var ...
- html的canvas显示数字,HTML5效果:Canvas 实现圆形进度条并显示数字百分比
实现效果 1.首先创建html代码 2.创建canvas环境 var canvas = document.getElementById('canvas'), //获取canvas元素 context ...
- html数字显示百分比,扣丁学堂html5 教程之Canvas实现圆形进度条并显示数字百分比效果...
今天扣丁学堂html5培训小编和大家分享一下Canvas实现圆形进度条并显示数字百分比效果示例,对html5感兴趣的小伙伴或者是参加学习的小伙伴可以了解一下. Canvas实现圆形进度条并显示数字百分 ...
- android自定义透明圆形,Android progressdialog自定义背景透明的圆形进度条类似于Dialog...
很高兴能为大家分享一个背景是透明的圆形进度,先开效果图 效果图如下: 效果图 实现方法如下: 首先准备自己要定义成哪样子的效果的图片. 圆形进度条 1.创建Dialog的代码,你可以自己封装成一个方法 ...
- html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
- html进度条倒计时代码,html5+css3进度条倒计时动画特效代码【推荐】_html5教程技巧...
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
- h5动画 php,HTML_多视角3D逼真HTML5水波动画 ,html5+css3进度条倒计时动画特效 - phpStudy...
多视角3D逼真HTML5水波动画 html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了htm ...
- html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画
jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...
最新文章
- 静态链接库与动态链接库 (二)动态链接库的编译与使用
- 在centos上通过yum直接安装最新版gcc和开发工具
- MATLAB中求矩阵非零元的坐标
- 记一次 .NET 某消防物联网 后台服务 内存泄漏分析
- Hibernate中hql的基本查询、条件查询、排序插叙、分页查询、投影查询
- JAVA使用ByteArrayOutputStream、ByteArrayInputStream将对象序列化反序列化,通过JAVA socket实现对象在网络中传输
- Vuejs 写法实例
- 接口的基本演练 java
- 史上最全分布式数据库概述
- Spring boot 连接Redis实现HMSET操作
- android内容协调,理清Android协调布局CoordinatorLayout的摆放位置及特殊属性。
- Android项目运行junit测试类时出现错误Internal Error (classFileParser.cpp:3494)的解决办法...
- 信息系统项目管理师备考指南
- Spring Boot使用RabbitMQ出现诡异异常:Failed to send reply with payload 'OK',Cannot determine ReplyTo message
- <数字图像处理>整理--冈萨雷斯版-华中科技大学powerpoint
- 智能自动感应手消毒器方案开发
- 青云科技成为开源 GitOps 产业联盟会员
- 2018年全国大学生电子设计竞赛“TI杯”H题解析
- DELPHI线程创建与使用
- (转载)C++中的头文件