倒计时数字特效

沐卿゚

于 2022-02-15 11:24:12 发布

阅读量501

点赞数 1

分类专栏： js 文章标签： javascript css html 前端 vue.js

本文链接：https://blog.csdn.net/Leijiang0504/article/details/122940763

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

这是一个使用HTML, CSS和JavaScript实现的炫酷粒子变换特效。页面中，一个圆形元素在计数器减到0时会放大并淡出，然后显示'时间到'，背景颜色变为红色，字体大小和样式也会相应变化。此特效利用了CSS的过渡效果和JavaScript的定时器功能。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>炫酷粒子变换特效</title>
  <style type="text/css">
          body,html{
            margin:0px;
            height:100%;
        }
        body{background: #000;
            overflow: hidden;}
        div{ width:200px;
            height:200px;
            border: 5px #fff solid;
            border-radius: 50%;
            position: relative;
            margin: 0 auto;
            text-align: center;
            -webkit-transition: all .5s ease-in .1s;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }
        div>span{  color: #fff;
            display: inline-block;
            position: absolute;
            left: 50%;
            top: 50%;
            font-size: 145px;
            line-height: 74%;
            font-weight: bolder;
            font-family: Arial, Helvetica, sans-serif;
            -webkit-transform: translate(-50%, -50%);
            width: 100%;
        }
        .bigbang{
            -webkit-transform: scale(10);
            opacity: 0;
        }
  </style>
</head>

<body>
    <div>
        <span id="num">20</span>
    </div>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript">
      function djs(){
        var obj=document.getElementById('num');
        var num=obj.innerText;
        obj.innerText=num-1;
        if(num-1==0){
            clearInterval(ds);
            obj.parentElement.className='bigbang';
            setTimeout(function(){
                obj.parentElement.className='';
                obj.innerHTML='时间到';
                obj.style.fontSize='58px';
                obj.parentElement.style.background='red';
            },600)
        }
    }
    //djs();
    var ds=setInterval(djs,1000);
  </script>
</body>

</html>

沐卿゚

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
倒计时数字特效

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>炫酷粒子变换特效</title> <style type="text/css"> body,html{ margin:0px; height:100%; } body{background: .
复制链接

扫一扫