HTML+CSS+JS实现 ❤️ 粒子倒计时特效❤️

193 阅读1分钟

🍅 作者主页:Java李杨勇 

🍅 简介:Java领域优质创作者🏆、Java李杨勇公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我,都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

 效果演示: 文末获取源码 

  代码目录:

主要代码实现:

html代码 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>粒子倒计时</title>

    <style type="text/css">
        @font-face {
            font-family: 'Lato';
            font-style: normal;
            font-weight: 900;
            src: url(https://fonts.gstatic.com/s/lato/v20/S6u9w4BMUTPHh50XSwiPHA.ttf) format('truetype');
        }

        body {
            background-color: #24282f;
            margin: 0;
            padding: 0;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }

        #canvas-number {
            width: 680px;
            height: 420px;
        }
    </style>

</head>

<body>

    <script src="js/TweenMax.min.js"></script>

    <canvas id="canvas-number"></canvas>
    <canvas id="canvas-dots"></canvas>

    <script src="js/script.js"></script>

</body>

</html>

js文件在上面截图可以看到 需要引进来。

 源码获取

大家点赞、收藏、关注、评论我啦 、查看下方微信公众号获取

打卡 文章 更新 44 /  100天

精彩推荐更新中:

HTML5大作业实战案例《100套》

Java毕设项目精品实战案例《100套》