css炫酷的倒计时,CSS3 实现倒计时效果
实现效果
html
%div.wrapper
%div.time-part-wrapper
%div.time-part.minutes.tens
%div.digit-wrapper
%span.digit 0
- (-5..0).each do |i|
%span.digit= -i
%div.time-part.minutes.ones
%div.digit-wrapper
%span.digit 0
- (-9..0).each do |i|
%span.digit= -i
%div.time-part-wrapper
%div.time-part.seconds.tens
%div.digit-wrapper
%span.digit 0
- (-5..0).each do |i|
%span.digit= -i
%div.time-part.seconds.ones
%div.digit-wrapper
%span.digit 0
- (-9..0).each do |i|
%span.digit= -i
%div.time-part-wrapper
%div.time-part.hundredths.tens
%div.digit-wrapper
%span.digit 0
- (-9..0).each do |i|
%span.digit= -i
%div.time-part.hundredths.ones
%div.digit-wrapper
%span.digit 0
- (-9..0).each do |i|
%span.digit= -i
css
@import "compass/css3";
/* play with speed and easing of the animation */
$one-second: 1s;
$easing: cubic-bezier(1,0,1,0);
/* =========================================== */
@mixin animate($count) {
$step: (100 / $count);
$progress: 0%;
$translate: -$digit-height;
@while $progress < 100 {
#{$progress} { transform: translatey($translate); }
$progress: $progress + $step;
$translate: $translate - $digit-height;
}
}
$digit-height: 180px;
.digit {
display: inline-block;
font-size: 200px;
color: rgba(0,0,0,0.25);
height: $digit-height;
line-height: 1;
}
.time-part-wrapper {
display: inline-block;
margin-right: 50px;
position: relative;
&:not(:last-child):after {
content: ":";
display: block;
width: 30px;
height: 230px;
position: absolute;
top: 0px;
right: -30px;
color: rgba(0,0,0,0.25);
font-size: 200px;
line-height: 0.9;
}
}
.time-part {
width: 140px;
text-align: center;
height: $digit-height;
overflow: hidden;
display: inline-block;
margin-left: -5px;
box-sizing: border-box;
.digit-wrapper {
animation-timing-function: $easing;
}
&.minutes {
&.tens .digit-wrapper {
animation-name: minutes-tens;
animation-duration: $one-second * 10 * 6 * 10 * 6;
animation-iteration-count: 1;
}
&.ones .digit-wrapper {
animation-name: minutes-ones;
animation-duration: $one-second * 10 * 6 * 10;
animation-iteration-count: 6;
}
}
&.seconds {
&.tens .digit-wrapper {
animation-name: seconds-tens;
animation-duration: $one-second * 10 * 6;
animation-iteration-count: 60;
}
&.ones .digit-wrapper {
animation-name: seconds-ones;
animation-duration: $one-second * 10;
animation-iteration-count: 360;
}
}
&.hundredths {
&.tens .digit-wrapper {
animation-name: hundredths-tens;
animation-duration: $one-second;
animation-iteration-count: 3600;
}
&.ones .digit-wrapper {
animation-name: hundredths-ones;
animation-duration: $one-second / 10;
animation-iteration-count: 36000;
}
}
}
@keyframes minutes-tens {
@include animate(6);
}
@keyframes minutes-ones {
@include animate(10);
}
@keyframes seconds-tens {
@include animate(6);
}
@keyframes seconds-ones {
@include animate(10);
}
@keyframes hundredths-tens {
@include animate(10);
}
@keyframes hundredths-ones {
@include animate(10);
}
body {
background: #f1614b;
margin: 0;
font-family: "aldrich";
}
.wrapper {
margin: 100px auto;
width: 1000px;
position: relative;
&:before, &:after {
content: "";
display: block;
position: absolute;
width: 100%;
left: 0;
height: 20px;
z-index: 10;
}
&:before {
top: 0px;
@include background-image(linear-gradient(top, rgba(241,97,75,1) 0%,rgba(241,97,75,0) 100%));
}
&:after {
bottom: 0px;
@include background-image(linear-gradient(top, rgba(241,97,75,0) 0%,rgba(241,97,75,1) 100%));
}
}
以上就是css3 实现倒计时效果的详细内容,更多关于css3 倒计时的资料请关注萬仟网其它相关文章!
css炫酷的倒计时,CSS3 实现倒计时效果相关推荐
- css炫酷标题,纯css3鼠标滑过图片炫酷标题显示特效
很多网站的图片鼠标滑过显示标题效果都是使用jQuery来完成的,现在,我们可以使用CSS3 animations来完成同样惊艳的效果.如果你对CSS3 animations还不了解,请先阅读CSS3 ...
- html表单下拉美化教程,html5和css3炫酷select下拉菜单美化效果
html5和css3炫酷select下拉菜单美化效果 发布日期:2015-10-20 11:11 来源: 标签: 网页技术 CSS教程 html5+css3 select下拉菜单美化 这是一款使用ht ...
- 纯html+css炫酷地球仪动画效果
纯html+css炫酷地球仪动画效果 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- HTML+CSS炫酷彩色立方体特效
源码视频教程 HTML+CSS炫酷彩色立方体 HTML代码 <!DOCTYPE html> <html lang="en"><head>< ...
- 炫酷的css3动作源码,8 个超炫酷的纯 CSS3 动画及源码分享
在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页.本文要分享8个超炫酷的纯CSS3 ...
- css炫酷标题,分享几个CSS小众但炫酷的技巧
1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? 复制代码代码如下: img.desaturate { filter: grayscale(100%); -webkit-filte ...
- wordpress字体样式——css炫酷的字体样式实现
demo1:css实现颜色变化 效果如图所示 实现代码如下 <!DOCTYPE html> <html lang="en"> <head>< ...
- 14款CSS3炫酷表单input输入框美化效果【附源码】
这是一款效果非常酷的CSS3表单input输入框美化效果插件.为表单的input输入框制作一些特殊的效果能给用户带来更好的用户体验.这个CSS3表单input输入框美化插件就是一个很好的例子.这个插件 ...
- 【css炫酷动画】让面试官眼前一亮的故障风格文字动画
今天分享一个用 css3 来实现一个最近特别流行的故障风格的文字展示动画,我敢说,只要你在你的项目中用到这个动画,面试官看到了一定会眼前一亮.下面先来看一下成品图 该动画效果就比较复杂了,用到的知识比 ...
最新文章
- R语言基于DALEX包进行特征筛选(feature selection)
- 深度解读Helm 3: 犹抱琵琶半遮面
- C#统计一段时间内有多少个星期几
- 读书计划清单之碎碎念
- java与C++实现判断闰年(百练OJ:2733:判断闰年)
- sendData to ABAP backend via multiple form content type
- deepin tim(wine)无法安装_浅析国产操作系统深度deepin
- windows软件设置快捷键
- Python中Queue.get()方法阻塞,怎么办?
- 来自一个包工头的创业故事
- mysql 关系图 工具_ER图绘制软件-DbSchema数据库关系图设计器下载v8.1.7-领航下载站...
- dcm文件转换成jpg文件
- 红米手机使用应用沙盒动态修改运营商参数
- 系统集成项目管理工程师(一)
- 认知的方法论 --以学习python编程语言为例
- nginx无网络启动失败——proxy_pass域名DNS解析出错
- 影响债市行情的主要因素_决定债券收益的十大因素
- 使用微搭低代码制作每日菜单小程序
- springboot+校园招聘管理 毕业设计-附源码161815
- 20201024腾格尔沙漠徒步
热门文章
- 计算机基础(1)【注:本人是学生,此文只是发表自己的看法,如有错误,还请在评论区留言评价】
- Vote3Deep: Fast Object Detection in 3D Point Clouds Using Efficient Convolutional Neural Networks
- 江苏省职称计算机word2003教材,2017职称计算机word2003考点:文档编辑
- Android Q手势功能升级-似苹果3D Touch
- Python简单爬取电影磁力链接
- ends,flush,endl 用法区别
- Error: timed out while waiting for target halted
- 解决企业微信启动报错:0x0000142无法打开
- php判断安卓还是苹果客户端
- 手机自带计算机删了怎么恢复出厂设置,还原出厂设置会怎样_电脑如何恢复出厂设置...