devbox
小小林熬夜学编程
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

js+css3简易实现2023新年快乐全屏满天星动画特效_js新年特效

作者：小小林熬夜学编程 | 2024-02-16 04:50:35

赞

踩

js新年特效

目录

⭐ 前言

一、效果图

二、代码实现 

2.1 html

2.2 CSS

2.3. JS

⭐ 预览

⭐ 前言

js+css3全屏星星闪烁背景2023新年快乐动画特效，文字还有3D立体效果。其中，利用Math.random()方法，实现满天星的效果，着实让人眼前一亮。对于某些站点来说，这个方法非常实用，因为可以利用它来随机显示一些名人名言和新闻事件。

好了，话不多说，先看效果图，如下：

一、效果图

二、代码实现 

2.1 html

* index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>js+css3全屏2023新年快乐动画特效</title>
  6.     <link rel="stylesheet" href="css/style.css" />
  7.   </head>
  8.   <body>
  9.     <section class="section">
  10.       <h2 class="section__title">Happy New Year<br /><span>2023</span></h2>
  11.     </section>
  12.     <script src="js/script.js"></script>
  13.   </body>
  14. </html>

2.2 CSS

* style.css

  1. * {
  2.   /* 采用怪异模式下的盒模型：元素的总高度和宽度包含内边距和边框(padding与border)  */
  3.   box-sizing: border-box;
  4.   margin: 0;
  5.   padding: 0;
  6. }
  7.  
  8. body {
  9.   /* 没有滚动条 */
  10.   overflow: hidden;
  11. }
  12.  
  13. .section {
  14.   display: flex;
  15.   justify-content: center;
  16.   align-items: center;
  17.   position: relative;
  18.   min-height: 100vh;
  19.   background: linear-gradient(135deg, #111, #222, #111);
  20. }
  21. .section::before {
  22.   content: "";
  23.   position: absolute;
  24.   width: 30vw;
  25.   height: 30vw;
  26.   /* 红色边框 */
  27.   border: 5vw solid #ff1062;
  28.   /* 圆形边框 */
  29.   border-radius: 50%;
  30.   /* 为边框添加2个下拉阴影 */
  31.   box-shadow: 0 0 0 1vw #222, 0 0 0 1.3vw #fff;
  32. }
  33. .section .section__title {
  34.   position: absolute;
  35.   transform: skewY(-7deg);
  36.   z-index: 10;
  37.   color: #fff;
  38.   text-align: center;
  39.   font-size: 9vw;
  40.   line-height: 2em;
  41.   text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
  42.     5px 5px 0 #ccc, 10px 10px 0 rgba(0, 0, 0, 0.2);
  43.   animation: floating 5s ease-in-out infinite;
  44. }
  45. .section .section__title span {
  46.   text-shadow: 1px 1px 0 #ccc, 2px 2px 0 #ccc, 3px 3px 0 #ccc, 4px 4px 0 #ccc,
  47.     5px 5px 0 #ccc, 6px 6px 0 #ccc, 7px 7px 0 #ccc, 8px 8px 0 #ccc,
  48.     9px 9px 0 #ccc, 20px 20px 0 rgba(0, 0, 0, 0.2);
  49.   font-weight: 700;
  50.   font-size: 3em;
  51. }
  52. .section i {
  53.   position: absolute;
  54.   background: #fff;
  55.   border-radius: 50%;
  56.   box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 40px #fff, 0 0 80px #fff;
  57.   animation: animate linear infinite;
  58. }
  59.  
  60. @keyframes floating {
  61.   0%,
  62.   100% {
  63.     transform: skewY(-7deg) translate(0, -20px);
  64.   }
  65.   50% {
  66.     transform: skewY(-7deg) translate(0, 20px);
  67.   }
  68. }
  69. /* 利用透明度设置星星明暗变化的动画效果 */
  70. @keyframes animate {
  71.   0% {
  72.     opacity: 0;
  73.   }
  74.   10% {
  75.     opacity: 1;
  76.   }
  77.   90% {
  78.     opacity: 1;
  79.   }
  80.   100% {
  81.     opacity: 0;
  82.   }
  83. }

2.3. JS

* script.js

  1. const stars = () => {
  2.   const count = 200;
  3.   const section = document.querySelector('.section');
  4.   let i = 0;
  5.   while (i < count) {
  6.     // 在内存中创建一个新的空元素对象,如i或是div
  7.     const star = document.createElement('i');
  8.     // 定义变量x和y ：通过Math.random()方法随机的使星星出现在不同位置，当然星星的定位要在文档显示区内
  9.     const x = Math.floor(Math.random() * window.innerWidth);
  10.     const y = Math.floor(Math.random() * window.innerHeight);
  11.     const size = Math.random() * 4;
  12.     // 让星星始终会在网页最左最顶端出现，通过想x和y的定位，我们要让它出现在页面各个不同的位置
  13.     star.style.left = x + 'px';
  14.     star.style.top = y + 'px';
  15.     // 利用Math.random()这个方法来随机取星星的大小：为每颗星星设置随机的宽高范围为[0,5)
  16.     star.style.width = 1 + size + 'px';
  17.     star.style.height = 1 + size + 'px';
  18.     
  19.     const duration = Math.random() * 2;
  20.     
  21.     // 设置持续时间
  22.     // js中除了减法计算之外，不允许随便写-。因为会混淆。所以，DOM标准规定，所有带-的css属性名，一律去横线变驼峰
  23.     // css属性animation-duration,在js中改写为驼峰形式：animationDuration
  24.     star.style.animationDuration = 2 + duration + 's';
  25.     // 设置延迟 
  26.     star.style.animationDelay = 2 + duration + 's';
  27.     // 将新元素添加到DOM树：把新创建的节点追加到父元素下所有直接子元素的结尾
  28.     section.appendChild(star);
  29.     i++;
  30.   }
  31. }
  32. // 调用函数
  33. stars();

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/blog/article/detail/90859
推荐阅读

赞

踩

  • article

    蓝桥杯Web应用开发-CSS3 新特性【练习一：属性有效性验证】

    蓝桥杯Web应用开发【国赛班】-CSS3新特性【练习一：属性有效性验证】蓝桥杯Web应用开发-CSS3新特性【练习一：属性有效性验证】练习一：属性有效性验证页面上有一个邮箱输入框，当你的输入满足邮箱格式时，输入框的背景颜色为绿色；当你的输入... [详细]

    赞

    踩

  • article

    [HTML]Web前端开发技术17（HTML5、CSS3、JavaScript ）textarea，checkbox，button，fieldset，option，radio——喵喵画网页

    表单概述　表单信息输入　单行文本输入框、密码框文本框　关于在不同浏览器中显示宽度不同的解决问题　关于IE浏览器中默认文本框和密码框显示长度不一的问题　复选框、单选按钮　提交按钮、重置按钮和普通按钮　图像提交按钮　按钮组合案例　文件选择框及隐... [详细]

    赞

    踩

  • article

    [HTML]Web前端开发技术21（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用，border-radius，box-shadow，transform——喵喵画网页

    前言CSS3边框　1.border-radius圆角边框　2．box-shadow边框阴影　3．border-image边框图像CSS3转换transform属性　1．CSS32D转换总结[HTML]Web前端开发技术21（HTML5、CS... [详细]

    赞

    踩

  • article

    [HTML]Web前端开发技术23（HTML5、CSS3、JavaScript ）HTML5 基础与CSS3 应用,animation,text-shadow,word-wrap——喵喵画网页

    前言CSS3动画animationCSS3动画animation子属性设置CSS3多列属性CSS3文本效果　1．文本阴影text-shadow属性　2．文本换行text-wrap属性　3．控制换行word-wrap属性　4．文本溢出text... [详细]

    赞

    踩

  • article

    HTML5+CSS3+移动web——HTML 基础

    掌握HTML标签基本语法（标题、段落、换行、水平线、文本格式、图像、路径、超链接、音频、视频、注释），能够独立布局文章页HTML5+CSS3+移动web——HTML基础目录一、标签语法HTML的基本框架1.标题标签2. 段落标签3... [详细]

    赞

    踩

  • article

    HTML新年代码之新年快乐新年大吉_html 新年快乐

    【代码】HTML新年代码之新年快乐新年大吉。_html新年快乐html新年快乐效果图预览：html界面代码如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http... [详细]

    赞

    踩

  • article

    【HTML源码--一】：登录+蛋糕+照片+烟花；生日快乐、新年快乐、表白等_编写生日快乐带登录可以存视频的html文件

    基于制作了一个小网页，有简单的用户登录功能，蛋糕、祝福、照片、烟花等小功能；稍加修改就可以用来表白、给好朋友送祝福、祝福新年等。_编写生日快乐带登录可以存视频的html文件编写生日快乐带登录可以存视频的html文件基于HTML+CSS+Ja... [详细]

    赞

    踩

  • article

    HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐_生日快乐的链接代码

    html+css+js生日快乐网站模板（多页面功能版本+音乐）❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码（HTML5+CSS3+JS）程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js生日快乐网站模板... [详细]

    赞

    踩

  • article

    html做生日快乐页面,生日快乐网站模板（个人制作）（HTML5+CSS3+JS） 修改版

    【实例简介】是对之前一个资源的补充，之前少了一些内容，但是没办法修改所以就重传了一份。多了一张图片和一个帮助文档，介绍怎么修改登陆密码和替换图片，其它也没啥不一样23333.下面是原文档的描述：自己给好朋友制作的一个生日快乐的网站，做完之后... [详细]

    赞

    踩

  • article

    ❤生日快乐网站模板HTML❤（精品制作）（HTML5+CSS3+JS）_vue实现生日快乐哆啦a梦网页版代码

    生日快乐网站模板HTML（精品制作）（HTML5+CSS3+JS）最近姐姐的生日快到了，想着也没有什么礼物送给她，恰好因为CTF的原因学了点HTML和JavaScript，就做了两个网页，当然因为网页(wo)很(ye)简(bu)单(hui)... [详细]

    赞

    踩

  • article

    新年快乐，动态烟花及祝福代码，能通过微信发送

    新年快乐！这是一个动态烟花代码的例子：

    • Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。