倒计时 css实现

最新推荐文章于 2024-04-09 14:07:34 发布
最新推荐文章于 2024-04-09 14:07:34 发布
阅读量1.2k 收藏
点赞数
分类专栏： 新生在学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014370861/article/details/25823873
版权 
*{
	margin: 0;
	position: 0
}
body{
	background-color: #333;
}
.father{
	margin: 200px auto;
	border: 1px dashed #999;
	width: 1em;
	height: 1em;
	font-size: 120px;
    font-family: sans-serif;
    opacity: 0;
    overflow: hidden;
    position: relative;
    -webkit-animation: mysecond 6s;
    -o-animation: mysecond 6s;
    animation: mysecond 6s;
}
.son{
	position: absolute;
	text-align: center;
	color: #f00;
	width: 1em;
	line-height: 1em;
	-webkit-animation: myfirst 6s steps(6);
	-o-animation: myfirst 6s steps(6);
	animation: myfirst 6s steps(6);
}
@-webkit-keyframes myfirst {
	0% {left:0em;top:0px;  }
	100%{left:0em;top:-6em;}
}
@-o-keyframes myfirst {
	0% {left:0em;top:0px;  }
	100%{left:0em;top:-6em;}
}
@-moz-keyframes myfirst {
	0% {left:0em;top:0px;  }
	100%{left:0em;top:-6em;}
}
@keyframes myfirst {
	0% {left:0em;top:0px;  }
	100%{left:0em;top:-6em;}
}
@-webkit-keyframes mysecond {
	0% {opacity:1;}
    84%{opacity:1;-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);}
	100% {opacity:0;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(360deg) scale(0.01);
     -moz-transform: rotate(360deg) scale(0.01);
     -ms-transform: rotate(360deg) scale(0.01);
     -o-transform: rotate(360deg) scale(0.01);
     transform: rotate(360deg) scale(0.01);}
}
@-o-keyframes mysecond {
	0% {opacity:1;}
    84%{opacity:1;-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);}
	100% {opacity:0;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(360deg) scale(0.01);
     -moz-transform: rotate(360deg) scale(0.01);
     -ms-transform: rotate(360deg) scale(0.01);
     -o-transform: rotate(360deg) scale(0.01);
     transform: rotate(360deg) scale(0.01); }
}
@-moz-keyframes mysecond {
	0% {opacity:1;}
    84%{opacity:1;-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);}
	100% {opacity:0;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(360deg) scale(0.01);
     -moz-transform: rotate(360deg) scale(0.01);
     -ms-transform: rotate(360deg) scale(0.01);
     -o-transform: rotate(360deg) scale(0.01);
     transform: rotate(360deg) scale(0.01); }
}
@keyframes mysecond {
	0% {opacity:1;}
    84%{opacity:1;-webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);}
	100% {opacity:0;
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(360deg) scale(0.01);
     -moz-transform: rotate(360deg) scale(0.01);
     -ms-transform: rotate(360deg) scale(0.01);
     -o-transform: rotate(360deg) scale(0.01);
     transform: rotate(360deg) scale(0.01); }
}







<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css.css">
</head>
<body>
	<div class="father">
		<div class="son">5 4 3 2 1 0 0</div>
	</div>
</body>
</html>




                

        

        

    




    

      

        

            

              
                
                  丿狂奔兔
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
倒计时 css,css实现倒计时效果

				
			

			

				

					weixin_31523833的博客
				

				

					08-03
					
					2758
					
				

			

		

		

			
				
一、实现效果截图(学习视频推荐：css视频教程)二、实现原理看到上图效果应该很容易猜到原理，纯CSS的话使用轮播。通过改变图片的margin-top，再加上亿点点动画，亿点点数字图片，就实现了。使用PS建数字图片：然后架结构三、实现细节1、纯CSS轮播论坛里有很多这里就不细讲啦！总之就是利用轮播的效果，让图片由下至上的动画实现2、倒序摆放图片，因为倒计时间是由大到小的(废话)           ...

			
		

	



                

              
                



	

		

			

				
					
使用 HTML、CSS 和 JS 的简单倒数计时器(1)

				
			

			

				

					2401_83641180的博客
				

				

					04-13
					
					1109
					
				

			

		

		

			
				
担。**[外链图片转存中…(img-ox8dQr7q-1712998621948)][外链图片转存中…(img-2y9QQIv6-1712998621948)][外链图片转存中…(img-0MkEODxv-1712998621949)][外链图片转存中…(img-XqaiYXXm-1712998621949)]

			
		

	



                


  
              

                


	

		

			

				
					
使用css3实现一个超浪漫的新年倒计时

				
			

			

				

					xingyu_qie的专栏
				

				

					12-21
					
					3905
					
				

			

		

		

			
				
希望伴随着倒计时，2022年一切的不如意都早点烟消云散，但不管未来的2023年会怎么样，我们也应该勇敢的冲上去，哪怕失败了，至少我们冲过。

			
		

	





	

		

			

				
					
css炫酷的倒计时,CSS3 实现倒计时效果

				
			

			

				

					weixin_30838923的博客
				

				

					08-03
					
					1098
					
				

			

		

		

			
				
实现效果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....

			
		

	



		

			
		



	

		

			

				
					
使用 HTML、CSS 和 JS 的简单倒数计时器

				
			

			

				

					2401_84011132的博客
				

				

					04-09
					
					1220
					
				

			

		

		

			
				
【代码】使用 HTML、CSS 和 JS 的简单倒数计时器。

			
		

	





	

		

			

				
					
用CSS实现圆环倒计时

				
			

			

				

					Ranye的博客
				

				

					09-03
					
					1713
					
				

			

		

		

			
				
css + svg

			
		

	





	

		

			

				
					
CSS3 实现倒计时效果

				
			

			

				

					01-18
				

			

		

		

			
				
实现效果  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-...

			
		

	





	

		

			

				
					
css3 实现圆形旋转倒计时

				
			

			

				

					12-14
				

			

		

		

			
				
很多答题的H5界面上有旋转倒计时的效果，一个不断旋转减少的动画，类似于下图的这样。  今天研究了下，可以通过border旋转得到。一般我们可以通过border得到一个四段圆。   See the Pen circle by stoneniqiu (@...

			
		

	





	

		

			

				
					
JavaScript实现倒计时

				
			

			

				

					12-14
				

			

		

		

			
				
总结，JavaScript实现倒计时主要涉及以下几个步骤：获取起始和结束时间，计算时间差，定期更新界面，以及结合HTML和CSS进行样式设计。这个过程不仅加深了对JavaScript时间处理的理解，也展示了JavaScript在动态网页...

			
		

	





	

		

			

				
					
CSS3 SVG实现10秒倒计时特效

				
			

			

				

					06-24
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用CSS3和SVG（可缩放矢量图形）技术来创建一个10秒的倒计时特效，这是一种常见的动态视觉元素，常用于网站、应用程序和游戏等数字产品中，以增加用户体验的互动性和吸引力。...

			
		

	





	

		

			

				
					
HTML+CSS动画实现倒计时

				
			

			

				

					MockingBird
				

				

					11-16
					
					5695
					
				

			

		

		

			
				
想做一个倒计时的动画，看了一些方法找了一个比较巧妙的实现方法
首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，可以通过css设置盒子的圆角（50%）做一个如下的进度条
.circleprogress{
    width: 160px;
    height: 160px;
    border:20px solid red;
    border-radius: 50...

			
		

	





	

		

			

				
					
Js+CSS完成漂亮的网页倒计时效果

				
			

			

				

					06-08
				

			

		

		

			
				
一个Js+CSS完成漂亮的倒计时效果，仿广州亚运会的网页倒计时效果，CSS的功能其实占了一大半，仅供参考。

			
		

	





	

		

			

				
					
js倒计时代码带css页面

				
			

			

				

					12-17
				

			

		

		

			
				
js倒计时代码带css页面js倒计时代码带css页面

			
		

	





	

		

			

				
					
非常简单的倒计时，代码非常少，样式背景可以自己改

				
			

			

				

					10-27
				

			

		

		

			
				
非常简单的倒计时，代码非常少，样式背景可以自己改 非常简单的倒计时，代码非常少，样式背景可以自己改

			
		

	





	

		

			

				
					
倒计时代码 淘宝

				
			

			

				

					12-19
				

			

		

		

			
				
保证可以用的淘宝倒计时代码

			
		

	





	

		

			

				
					
四种进度条倒计时-javascript-svg-html5打包共享

				
			

			

				

					03-15
				

			

		

		

			
				
包中有css3+html5  svg   等等的样式的进度条式倒计时

			
		

	





	

		

			

				
					
html+css+js制作时间倒计时（时分秒）简易版

				
			

			

				

					加油！
				

				

					11-14
					
					2783
					
				

			

		

		

			
				
html+css+js制作时间倒计时（时分秒）简易版

			
		

	





	

		

			

				
					
vue前端给css样式类绑定动态值，包含css动画实现扇形倒计时效果

				
			

			

				

					weixin_43996368的博客
				

				

					08-31
					
					1604
					
				

			

		

		

			
				
vue前端给css样式类绑定动态值

			
		

	





	

		

			

				
					
css炫酷的倒计时,CSS3 无尽的倒计时型LOADING动效

				
			

			

				

					weixin_39726971的博客
				

				

					08-03
					
					529
					
				

			

		

		

			
				
CSS语言：CSSSCSS确定:root {--duration: 5s;--bg: #001823;--color: #00c15e;}html {font-size: 1vmin;background: var(--bg) radial-gradient(closest-corner, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));heig...

			
		

	





	

		

			

				
					
html倒计时代码css

					
最新发布

				
			

			

				

					05-11
				

			

		

		

			
				
HTML倒计时代码和CSS可以用来实现网页上的倒计时效果，下面是一个简单的例子：

HTML代码：

```html
<div id="countdown">
  <span id="days"></span>天
  <span id="hours"></span>时
  <span id="minutes"></span>分
  <span id="seconds"></span>秒
</div>
```

CSS代码：

```css
#countdown {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}

#countdown span {
  padding: 5px;
  background-color: #eee;
  border-radius: 5px;
  margin-right: 5px;
}
```

JavaScript代码：

```javascript
function countdown() {
  var now = new Date();
  var eventDate = new Date("2021-10-01");
  var currentTime = now.getTime();
  var eventTime = eventDate.getTime();
  var remTime = eventTime - currentTime;

  var s = Math.floor(remTime / 1000);
  var m = Math.floor(s / 60);
  var h = Math.floor(m / 60);
  var d = Math.floor(h / 24);

  h %= 24;
  m %= 60;
  s %= 60;

  document.getElementById("days").textContent = d;
  document.getElementById("hours").textContent = h;
  document.getElementById("minutes").textContent = m;
  document.getElementById("seconds").textContent = s;

  setTimeout(countdown, 1000);
}

countdown();
```

这个例子中，我们使用了一个`<div>`元素来容纳倒计时的各个部分，并用CSS样式来美化它们。在JavaScript代码中，我们获取当前时间和目标时间之间的差距，并将其转换为剩余时间（天数、小时数、分钟数和秒数）。然后我们将这些值插入到HTML中的相应元素中，并使用`setTimeout`函数每秒钟更新一次倒计时。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值