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

2023新春祝福html代码，包你学会_怎么做新年祝福网址

作者：weixin_40725706 | 2024-02-15 15:01:54

赞

踩

怎么做新年祝福网址

前言

大家新年好！今天是年三十，在这个充满喜悦和欢乐的节日里，祝大家新年快乐。不论你在外面过的风生水起还是不尽人意，回到家一家人团团聚聚才是最好的。进入正题，我们作为IT民工，我们要用自己的方式表达对别人的祝福！

这是一个前端的祝福网页，网址是 新年快乐 (imimbert.github.io) ，完整代码一共两个文件，大家可以研究前端代码或者部署到 Github 给别人看。

使用方法

由于这次教程面向所有人，包括无任何编程基础的人群，所以非常详细。

首先在你存代码的目录下打开文件拓展名

新建文本文档

重命名为 index.txt。

再用同样的方法创建 index1.txt

然后把以下内容复制进 index.txt。

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>新年快乐</title><!-- 这是网页标题 -->
  6. <style>
  7. @import url('https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900');
  8.  
  9. @font-face {
  10.     font-family: mono;
  11.     src: url(../fonts/JetBrainsMono-Medium.ttf);
  12. }
  13.  
  14. * {
  15.     padding: 0;
  16.     margin: 0;
  17. }
  18.  
  19. ::placeholder {
  20.     color: #009bff66;
  21. }
  22.  
  23. a {
  24.     text-decoration: none;
  25. }
  26.  
  27. body .container {
  28.     background-color: #1e1e22;
  29.     box-sizing: border-box;
  30.     height: 500vw;
  31.     padding: 0 2vw;
  32. }
  33.  
  34. body .container .main {
  35.     margin: 0 auto;
  36.     width: 80vw;
  37. }
  38.  
  39. body .container .main .header {
  40.     height: 60px;
  41.     position: relative;
  42. }
  43.  
  44. body .container .main .header .nav {
  45.     height: 60px;
  46.     display: inline-block;
  47. }
  48.  
  49. body .container .main .header .nav li {
  50.     float: left;
  51.     height: 60px;
  52.     line-height: 60px;
  53.     margin: 0 1vw;
  54.     font-family: 'Poppins', serif;
  55.     font-size: 1vw;
  56.     list-style: none;
  57. }
  58.  
  59. body .container .main .header .nav li a {
  60.     border-bottom: 1px solid #009bff;
  61.     color: #ddd;
  62.     transition: all 0.5s;
  63. }
  64.  
  65. body .container .main .header .nav li a:hover {
  66.     color: #009bff;
  67. }
  68.  
  69. body .container .main .header .nav li p {
  70.     color: #009bff;
  71. }
  72.  
  73. body .container .main .header .btn-login {
  74.     position: absolute;
  75.     right: 0;
  76.     top: 0;
  77.     height: 60px;
  78.     display: flex;
  79.     flex-direction: row-reverse;
  80.     align-items: center;
  81. }
  82.  
  83. body .container .main .header .btn-login .nav-1 {
  84.     padding: 0 20px;
  85.     display: flex;
  86.     flex-direction: row;
  87.     height: 40px;
  88.     line-height: 40px;
  89.     color: #000;
  90.     background-color: #009bff;
  91.     border-radius: 20px;
  92.     text-align: center;
  93.     transition: all 0.3s;
  94. }
  95.  
  96. body .container .main .header .btn-login .nav-1:hover {
  97.     color: #ddd;
  98. }
  99.  
  100. body .container .main .header .btn-login .nav-1 ion-icon {
  101.     height: 40px;
  102.     padding-right: 10px;
  103. }
  104.  
  105. body .container .main .header .btn-login .nav-2 {
  106.     padding: 0 20px;
  107.     display: flex;
  108.     flex-direction: row;
  109.     height: 40px;
  110.     line-height: 40px;
  111.     color: #ddd;
  112.     text-align: center;
  113.     transition: all 0.3s;
  114. }
  115.  
  116. body .container .main .header .btn-login .nav-2:hover {
  117.     color: #009bff;
  118. }
  119.  
  120. body .container .main .header .btn-login .nav-2 ion-icon {
  121.     height: 40px;
  122.     padding-right: 10px;
  123. }
  124.  
  125. body .container .main section .title-bar {
  126.     height: 10vw;
  127. }
  128.  
  129. body .container .main section .title-bar .title {
  130.     border-right: 2px solid #000;
  131.     margin-top: 4vw;
  132.     display: inline-block;
  133.     font-size: 6vw;
  134.     font-family: 'mono', serif;
  135.     color: rgb(255, 255, 255);
  136.     overflow: hidden;
  137.     white-space: nowrap;
  138.     animation: borders 1s infinite normal,
  139.     widths 4s steps(16);
  140. }
  141.  
  142. @keyframes borders {
  143.     from {
  144.         border-right-color: #000;
  145.     }
  146.  
  147.     to {
  148.         border-right-color: #ddd;
  149.     }
  150. }
  151.  
  152. @keyframes widths {
  153.     from {
  154.         width: 0;
  155.     }
  156.  
  157.     to {
  158.         width: 16ch;
  159.     }
  160. }
  161.  
  162. .about {
  163.     margin-top: 3vw;
  164. }
  165.  
  166. .about p {
  167.     font-size: 1.5vw;
  168.     font-family: 'Poppins', serif;
  169.     color: #fff;
  170. }
  171.  
  172. .func-1 {
  173.     margin-top: 5vw;
  174.     display: flex;
  175.     flex-direction: row;
  176. }
  177.  
  178. .func-1 .func-1-left {
  179.     width: 55vw;
  180.     margin-right: 5vw;
  181.     border: 2px solid #ffffff;
  182.     border-radius: 25px;
  183. }
  184.  
  185. .func-1 .func-1-left #foo-bar {
  186.     padding: 1vw;
  187. }
  188.  
  189. .func-1 .func-1-left p {
  190.     font-family: "Poppins", serif;
  191.     font-size: 1.5vw;
  192.     color: #fff;
  193.     padding-left: 2vw;
  194. }
  195.  
  196. #daily-words {
  197.     padding-left: 3vw;
  198. }
  199.  
  200. .shop {
  201.     display: flex;
  202.     flex-direction: column;
  203.     margin: 2vw 0;
  204. }
  205.  
  206. .shop a{
  207.     color: #009bff;
  208.     transition: all .5s;
  209. }
  210.  
  211. .shop a:hover{
  212.     color: white;
  213. }
  214.  
  215. .shop p {
  216.     font-family: "Poppins", serif;
  217.     font-size: 1.5vw;
  218.     color: #fff;
  219.     padding-left: 1vw;
  220.     border-left: 2px solid #009bff;
  221. }
  222.  
  223. .shop h2 {
  224.     color: white;
  225.     margin-top: .5vw;
  226.     font-weight: 300;
  227.     font-family: "Poppins", serif;
  228.     font-size: 1.5vw;
  229. }
  230.  
  231. .shop h1{
  232.     font-family: 'Poppins', serif;
  233.     font-size: 3vw;
  234.     font-weight: 400;
  235.     color: #fff;
  236.     transition: all 1s;
  237. }
  238.  
  239. .shop h1:hover {
  240.     color: #009bff;
  241. }
  242. </style>
  243.  
  244. </head>
  245. <body>
  246.     <style>
  247.         body .container {
  248.             background-color: black;
  249.             box-sizing: border-box;
  250.             height: 500vw;
  251.             padding: 0 2vw;
  252.         }
  253.     </style>
  254.     <div class="container">
  255.         <div class="main">
  256.             <ul class="header">
  257.                 <ul class="nav">
  258.                     <li>
  259.                         <a href="#">Back to top</a>
  260.                     </li>
  261.                 </ul>
  262.             </ul>
  263.             <div class="shop" id="talk">
  264.                 <h1 style="color:white;">输入你的昵称</h1>
  265.                 <input type="text" style="width: 300px;height:30px;" id="a-name"><br>
  266.                 <button style="width: 60px;height:25px;" onclick="get()">提交</button>
  267.             </div>
  268.             <script>
  269.                 function get(){
  270.                     var butt = document.getElementById("a-name").value;
  271.                     // alert(butt);
  272.                     window.location = "./index1.html?name="+butt;
  273.                     window.sessionStorage.setItem('name', butt);  
  274.                 }
  275.             </script>
  276.         </div>
  277.     </div>
  278.   </body>
  279. </html>

再把以下内容复制进 index1.html

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>新年快乐</title><!-- 这是网页标题 -->
  6. <style>
  7. body{
  8.   overflow: hidden;
  9.   margin: 0;
  10. }
  11. h1{
  12.   position: fixed;
  13.   top: 30%;
  14.   left: 0;
  15.   width: 100%;
  16.   text-align: center;
  17.   transform:translateY(-50%);
  18.   font-family: 'Love Ya Like A Sister', cursive;
  19.   font-size: 60px;
  20.   color: #c70012;
  21.   padding: 0 20px;
  22. }
  23. h1 span{
  24.   position: fixed;
  25.   left: 0;
  26.   width: 100%;
  27.   text-align: center;
  28. margin-top:30px;
  29.     font-size:40px;
  30. }
  31. </style>
  32.  
  33. </head>
  34. <body>
  35. <h1 id="h1"></h1>
  36. <canvas></canvas> <!--canvas 画布-->
  37.  
  38. <script>
  39. var canvas = document.querySelector("canvas"),
  40.     ctx = canvas.getContext("2d");
  41.  
  42. var ww,wh;
  43.  
  44. function onResize(){
  45.     ww = canvas.width = window.innerWidth;
  46.     wh = canvas.height = window.innerHeight;
  47. }
  48.  
  49. ctx.strokeStyle = "red";
  50. ctx.shadowBlur = 25;
  51. ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  52.  
  53. var precision = 100;
  54. var hearts = [];
  55. var mouseMoved = false;
  56. function onMove(e){
  57.     mouseMoved = true;
  58.     if(e.type === "touchmove"){
  59.         hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  60.         hearts.push(new Heart(e.touches[0].clientX, e.touches[0].clientY));
  61.     }
  62.   else{
  63.         hearts.push(new Heart(e.clientX, e.clientY));
  64.         hearts.push(new Heart(e.clientX, e.clientY));
  65.     }
  66. }
  67.  
  68. var Heart = function(x,y){
  69.     this.x = x || Math.random()*ww;
  70.     this.y = y || Math.random()*wh;
  71.     this.size = Math.random()*2 + 1;
  72.     this.shadowBlur = Math.random() * 10;
  73.     this.speedX = (Math.random()+0.2-0.6) * 8;
  74.     this.speedY = (Math.random()+0.2-0.6) * 8;
  75.     this.speedSize = Math.random()*0.05 + 0.01;
  76.     this.opacity = 1;
  77.     this.vertices = [];
  78.     for (var i = 0; i < precision; i++) {
  79.         var step = (i / precision - 0.5) * (Math.PI * 2);
  80.         var vector = {
  81.             x : (15 * Math.pow(Math.sin(step), 3)),
  82.             y : -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
  83.         }
  84.         this.vertices.push(vector);
  85.     }
  86. }
  87.  
  88. Heart.prototype.draw = function(){
  89.     this.size -= this.speedSize;
  90.     this.x += this.speedX;
  91.     this.y += this.speedY;
  92.     ctx.save();
  93.     ctx.translate(-1000,this.y);
  94.     ctx.scale(this.size, this.size);
  95.     ctx.beginPath();
  96.     for (var i = 0; i < precision; i++) {
  97.         var vector = this.vertices[i];
  98.         ctx.lineTo(vector.x, vector.y);
  99.     }
  100.     ctx.globalAlpha = this.size;
  101.     ctx.shadowBlur = Math.round((3 - this.size) * 10);
  102.     ctx.shadowColor = "hsla(0, 100%, 60%,0.5)";
  103.     ctx.shadowOffsetX = this.x + 1000;
  104.     ctx.globalCompositeOperation = "screen"
  105.     ctx.closePath();
  106.     ctx.fill()
  107.     ctx.restore();
  108. };
  109.  
  110.  
  111. function render(a){
  112.     requestAnimationFrame(render);
  113.  
  114.     hearts.push(new Heart())
  115.     ctx.clearRect(0,0,ww,wh);
  116.     for (var i = 0; i < hearts.length; i++) {
  117.         hearts[i].draw();
  118.         if(hearts[i].size <= 0){
  119.             hearts.splice(i,1);
  120.             i--;
  121.         }
  122.     }
  123. }
  124.  
  125.  
  126. onResize();
  127. window.addEventListener("mousemove", onMove);
  128. window.addEventListener("touchmove", onMove);
  129. window.addEventListener("resize", onResize);
  130. requestAnimationFrame(render);
  131.  
  132. window.onload=function starttime(){
  133.     time(h1,'2023/1/21');     // 2023年春节时间
  134.     ptimer = setTimeout(starttime,1000); // 添加计时器
  135. }
  136.  
  137.     function time(obj,futimg){
  138.         var nowtime = new Date().getTime(); // 现在时间转换为时间戳
  139.         var futruetime =  new Date(futimg).getTime(); // 未来时间转换为时间戳
  140.         var msec = futruetime-nowtime; // 毫秒 未来时间-现在时间
  141.         var time = (msec/1000);  // 毫秒/1000
  142.         var day = parseInt(time/86400); // 天  24*60*60*1000
  143.         var hour = parseInt(time/3600)-24*day;    // 小时 60*60 总小时数-过去的小时数=现在的小时数
  144.         var minute = parseInt(time%3600/60); // 分 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
  145.         var second = parseInt(time%60);  // 以60秒为一整份 取余 剩下秒数
  146.         obj.innerHTML="<br>距离春节还有：<br>"+day+"天"+hour+"小时"+minute+"分"+second+"秒"+"<br><span>愿我所想的事顺心如意。<br>and may the things I think of be all right.<br>祝"+window.sessionStorage.getItem('name')+"新年快乐！"+"</span>"
  147.         return true;
  148.     }
  149. </script>
  150.   <!-- <audio id="bgmusic" src="http://music.163.com/song/media/outer/url?id=1851244378.mp3" autoplay="autoplay" loop="loop" style="display: block; width: 3%; height:3%;"></audio> -->
  151.     <script type="text/javascript">
  152.         // alert(butt);
  153.         document.addEventListener('DOMContentLoaded', function () {
  154.             function audioAutoPlay() {
  155.                 var audio = document.getElementById('bgmusic');
  156.                 audio.play();
  157.                 document.addEventListener("WeixinJSBridgeReady", function () {
  158.                     audio.play();
  159.                 }, false);
  160.             }
  161.             audioAutoPlay();
  162.         });
  163. </script>
  164. </body>
  165. </html>

重命名两个文件的后缀为 .html

然后双击 index.html，即可看到效果。

部署 Github

如果你想把你的网页分享给别人看，那你就要部署到 github（免费）

首先创建一个 github 账号，网址：github.com

注册好后创建一个仓库

命名为 xxx.github.io，例如 NewYear.github.io

然后进入这个页面

点这里

进入这个页面

把你刚才那两个文件拖到中间

点这

到这个页面

点这

到这个页面

点这

到这个页面

点这里，选择 main

变成这样

点 save

等几分钟刷新一下，出现类似这个就代表成功了

点这里就可以访问你的网站了

最后

最后也是给大家送上新年的祝福，再见~

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

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

  

闽ICP备14008679号