tnblog
首页
视频
资源
登录
原

HTML+css3+js 实现生日快乐代码，动态生成效果

20429人阅读 2020/4/19 5:31 总访问：185238 评论：8 收藏：0 手机
分类: 前端 
  1. <!DOCTYPE html>

  2. <html>

  3. <head>

  4.     <meta charset="UTF-8">

  5.     <title>生日快乐</title>

  6.     <meta name="viewport" content="width=device-width, initial-scale=1">

  7.     <link rel="stylesheet" href="css/style.css">

  8.     <link rel="stylesheet" href="css/style11.css">

  9.     <link rel="stylesheet" href="css/yanhua.css">

  10.     <link rel="stylesheet" href="css/style2D.css">

  11. </head>

  12. <body>

  13.     <marquee style="position: fixed; top: 10px; color: #fff" scrollamount="10">Happy birthday!           生日快乐！</marquee>

  14.     <marquee style="position: fixed; top: 20px; color: #ffd800" scrollamount="3">祝你生日快乐，天天开心！</marquee>

  15.     <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐，没有烦恼！</marquee>

  16.     <main style="text-align:center;position:absolute;">

  17.         <ul style="--v: 1; --t: 1;">

  18.             <li style="--i: 0"></li>

  19.         </ul>

  20.         <ul style="--v: 2; --t: 8; --direction:reverse">

  21.             <li style="--i: 0"></li>

  22.             <li style="--i: 1"></li>

  23.             <li style="--i: 2"></li>

  24.             <li style="--i: 3"></li>

  25.             <li style="--i: 4"></li>

  26.             <li style="--i: 5"></li>

  27.             <li style="--i: 6"></li>

  28.             <li style="--i: 7"></li>

  29.         </ul>

  30.         <ul style="--v: 3; --t: 12">

  31.             <li style="--i: 0"></li>

  32.             <li style="--i: 1"></li>

  33.             <li style="--i: 2"></li>

  34.             <li style="--i: 3"></li>

  35.             <li style="--i: 4"></li>

  36.             <li style="--i: 5"></li>

  37.             <li style="--i: 6"></li>

  38.             <li style="--i: 7"></li>

  39.             <li style="--i: 8"></li>

  40.             <li style="--i: 9"></li>

  41.             <li style="--i: 10"></li>

  42.             <li style="--i: 11"></li>

  43.         </ul>

  44.         <ul style="--v: 4; --t: 18; --direction:reverse">

  45.             <li style="--i: 0"></li>

  46.             <li style="--i: 1"></li>

  47.             <li style="--i: 2"></li>

  48.             <li style="--i: 3"></li>

  49.             <li style="--i: 4"></li>

  50.             <li style="--i: 5"></li>

  51.             <li style="--i: 6"></li>

  52.             <li style="--i: 7"></li>

  53.             <li style="--i: 8"></li>

  54.             <li style="--i: 9"></li>

  55.             <li style="--i: 10"></li>

  56.             <li style="--i: 11"></li>

  57.             <li style="--i: 12"></li>

  58.             <li style="--i: 13"></li>

  59.             <li style="--i: 14"></li>

  60.             <li style="--i: 15"></li>

  61.             <li style="--i: 16"></li>

  62.             <li style="--i: 17"></li>

  63.         </ul>

  64.         <ul style="--v: 5; --t: 22">

  65.             <li style="--i: 0"></li>

  66.             <li style="--i: 1"></li>

  67.             <li style="--i: 2"></li>

  68.             <li style="--i: 3"></li>

  69.             <li style="--i: 4"></li>

  70.             <li style="--i: 5"></li>

  71.             <li style="--i: 6"></li>

  72.             <li style="--i: 7"></li>

  73.             <li style="--i: 8"></li>

  74.             <li style="--i: 9"></li>

  75.             <li style="--i: 10"></li>

  76.             <li style="--i: 11"></li>

  77.             <li style="--i: 12"></li>

  78.             <li style="--i: 13"></li>

  79.             <li style="--i: 14"></li>

  80.             <li style="--i: 15"></li>

  81.             <li style="--i: 16"></li>

  82.             <li style="--i: 17"></li>

  83.             <li style="--i: 18"></li>

  84.             <li style="--i: 19"></li>

  85.             <li style="--i: 20"></li>

  86.             <li style="--i: 21"></li>

  87.         </ul>

  88.         <ul style="--v: 6; --t: 26; --direction:reverse">

  89.             <li style="--i: 0"></li>

  90.             <li style="--i: 1"></li>

  91.             <li style="--i: 2"></li>

  92.             <li style="--i: 3"></li>

  93.             <li style="--i: 4"></li>

  94.             <li style="--i: 5"></li>

  95.             <li style="--i: 6"></li>

  96.             <li style="--i: 7"></li>

  97.             <li style="--i: 8"></li>

  98.             <li style="--i: 9"></li>

  99.             <li style="--i: 10"></li>

  100.             <li style="--i: 11"></li>

  101.             <li style="--i: 12"></li>

  102.             <li style="--i: 13"></li>

  103.             <li style="--i: 14"></li>

  104.             <li style="--i: 15"></li>

  105.             <li style="--i: 16"></li>

  106.             <li style="--i: 17"></li>

  107.             <li style="--i: 18"></li>

  108.             <li style="--i: 19"></li>

  109.             <li style="--i: 20"></li>

  110.             <li style="--i: 21"></li>

  111.             <li style="--i: 22"></li>

  112.             <li style="--i: 23"></li>

  113.             <li style="--i: 24"></li>

  114.             <li style="--i: 25"></li>

  115.         </ul>

  116.         <ul style="--v: 7; --t: 32">

  117.             <li style="--i: 0"></li>

  118.             <li style="--i: 1"></li>

  119.             <li style="--i: 2"></li>

  120.             <li style="--i: 3"></li>

  121.             <li style="--i: 4"></li>

  122.             <li style="--i: 5"></li>

  123.             <li style="--i: 6"></li>

  124.             <li style="--i: 7"></li>

  125.             <li style="--i: 8"></li>

  126.             <li style="--i: 9"></li>

  127.             <li style="--i: 10"></li>

  128.             <li style="--i: 11"></li>

  129.             <li style="--i: 12"></li>

  130.             <li style="--i: 13"></li>

  131.             <li style="--i: 14"></li>

  132.             <li style="--i: 15"></li>

  133.             <li style="--i: 16"></li>

  134.             <li style="--i: 17"></li>

  135.             <li style="--i: 18"></li>

  136.             <li style="--i: 19"></li>

  137.             <li style="--i: 20"></li>

  138.             <li style="--i: 21"></li>

  139.             <li style="--i: 22"></li>

  140.             <li style="--i: 23"></li>

  141.             <li style="--i: 24"></li>

  142.             <li style="--i: 25"></li>

  143.             <li style="--i: 26"></li>

  144.             <li style="--i: 27"></li>

  145.             <li style="--i: 28"></li>

  146.             <li style="--i: 29"></li>

  147.             <li style="--i: 30"></li>

  148.             <li style="--i: 31"></li>

  149.         </ul>

  150.         <ul style="--v: 8; --t: 36; --direction:reverse">

  151.             <li style="--i: 0"></li>

  152.             <li style="--i: 1"></li>

  153.             <li style="--i: 2"></li>

  154.             <li style="--i: 3"></li>

  155.             <li style="--i: 4"></li>

  156.             <li style="--i: 5"></li>

  157.             <li style="--i: 6"></li>

  158.             <li style="--i: 7"></li>

  159.             <li style="--i: 8"></li>

  160.             <li style="--i: 9"></li>

  161.             <li style="--i: 10"></li>

  162.             <li style="--i: 11"></li>

  163.             <li style="--i: 12"></li>

  164.             <li style="--i: 13"></li>

  165.             <li style="--i: 14"></li>

  166.             <li style="--i: 15"></li>

  167.             <li style="--i: 16"></li>

  168.             <li style="--i: 17"></li>

  169.             <li style="--i: 18"></li>

  170.             <li style="--i: 19"></li>

  171.             <li style="--i: 20"></li>

  172.             <li style="--i: 21"></li>

  173.             <li style="--i: 22"></li>

  174.             <li style="--i: 23"></li>

  175.             <li style="--i: 24"></li>

  176.             <li style="--i: 25"></li>

  177.             <li style="--i: 26"></li>

  178.             <li style="--i: 27"></li>

  179.             <li style="--i: 28"></li>

  180.             <li style="--i: 29"></li>

  181.             <li style="--i: 30"></li>

  182.             <li style="--i: 31"></li>

  183.             <li style="--i: 32"></li>

  184.             <li style="--i: 33"></li>

  185.             <li style="--i: 34"></li>

  186.             <li style="--i: 35"></li>

  187.         </ul>

  188.         <p id="message">

  189.             ^O ^ a long distance, a long line, a long time, a long worry, a long day, a long wish, every time I send you today, I wish you a happy birthday, not only today, but every year.<br />

  190.         </p>

  191.     </main>

  192.     <div style="z-index:10000;">

  193.         <audio src="m/exp1.mp3" controls></audio>

  194.         <audio src="m/exp1.mp3" controls></audio>

  195.         <audio src="m/exp1.mp3" controls></audio>

  196.         <audio src="m/exp2.mp3" controls></audio>

  197.         <audio src="m/exp2.mp3" controls></audio>

  198.         <audio src="m/exp2.mp3" controls></audio>

  199.         <audio src="m/exp3.mp3" controls></audio>

  200.         <audio src="m/exp3.mp3" controls></audio>

  201.         <audio src="m/exp3.mp3" controls></audio>

  202.         <audio src="m/exp4.mp3" controls></audio>

  203.         <audio src="m/exp4.mp3" controls></audio>

  204.         <audio src="m/exp4.mp3" controls></audio>

  205.         <audio src="m/exp5.mp3" controls></audio>

  206.         <audio src="m/exp5.mp3" controls></audio>

  207.         <audio src="m/exp5.mp3" controls></audio>

  208.         <audio src="m/exp6.mp3" controls></audio>

  209.         <audio src="m/exp6.mp3" controls></audio>

  210.         <audio src="m/exp6.mp3" controls></audio>

  211.         <audio src="m/exp7.mp3" controls></audio>

  212.         <audio src="m/exp7.mp3" controls></audio>

  213.         <audio src="m/exp7.mp3" controls></audio>

  214.         <audio src="m/exp8.mp3" controls></audio>

  215.         <audio src="m/exp8.mp3" controls></audio>

  216.         <audio src="m/exp8.mp3" controls></audio>

  217.         <audio src="m/launch1.mp3" controls></audio>

  218.         <audio src="m/launch1.mp3" controls></audio>

  219.         <audio src="m/launch2.mp3" controls></audio>

  220.         <audio src="m/launch2.mp3" controls></audio>

  221.         <audio src="m/launch3.mp3" controls></audio>

  222.         <audio src="m/launch3.mp3" controls></audio>

  223.         <audio src="m/launch4.mp3" controls></audio>

  224.         <audio src="m/launch4.mp3" controls></audio>

  225.         <audio src="m/launch5.mp3" controls></audio>

  226.         <audio src="m/launch5.mp3" controls></audio>

  227.     </div>

  228.     <canvas id="canvas"></canvas> 

  229.     <script type="text/javascript" src="js/jquery.min.js"></script>

  230.     <script type="text/javascript" src="js/index1.js"></script>

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

  232.    

  233. </body>

  234. </html>



css，js 代码比较多，就不演示了

直接看效果图吧：

在这里插入图片描述
查看演示：

http://47.98.32.209:8081/HappyBirthdayToYou.html

评价

css弹性盒子，flex布局
css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

可输入下拉文本框，据输入，动态加载数据 jquery-editable-select
用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

.net mvc分部页，.net core分部页
.net分部页的三种方式第一种：@Html.Partial(&quot;_分部页&quot;)第二种：@{ Html.RenderPartial(&quot;分部页&quot;);}...

css中单位pxem，rem和vh/vw的理解
&gt;px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。em是相对长度单位。相对于当前对象内文本的字...

让IIS支持webp格式图片让IIS支持vtt格式，iis设置mime类型，iis配置支持的类型
webp格式图片可以让图片体积变小。也让下载图片变得更加困难一点 在线制作webp工具 https://www.upyun.com/webp?utm_mediu...

网页上传文件断点续传的实现，无视文件大小上传，以及datatables基本用法
首先明白js是客户带执行代码，c#是服务器上执行代码。本地文件需要用到js处理，服务器端接受c#代码处理1.HTML页面，文件信...

如何使用图标像使用文字一样，使用文本图标的方法
1.首先在Iconfont-阿里巴巴矢量图标库上面找到你需要的图标然后加入你的购物车然后选择图标；注意：每个类型的图标会大小不...

使用七牛云的cdn服务，提高图片的加载速度
CDN介绍CDN的全称是Content Delivery Network，即内容分发网络。CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，...

通俗易懂，什么是.NET?什么是.NET Framework？什么是.NET Core?
朋友圈@蓝羽 看到一篇文章写的太详细太通俗了，搬过来细细看完，保证你对.NET有个新的认识理解原文地址：https://www.cnblo...

JS监听input、keydown，有输入法时打字完成后触发事件
在给输入框绑定input或keydown事件时预期效果是有输入法时，输入中文后触发事件，不希望输一个字母就触发一次事件可以用到c...

修改了css后，让浏览器从缓存中更新
当我们修改了css后，如果不做一些操作，浏览器是不会自动更新我们的样式文件的。除非是过期或者用户手动刷新清理缓存等。所...

C MVC RedirectToAction跳转时候传递参数，Action之间传值
MVC Action之间传值,页面跳转传值方法一：路由传值很简单直接使用 RedirectToAction(string actionName, string controller...

当你工作遇到以下几种状态时，请果断跳槽走人
已经有想跳槽的念头，但是一直磨磨蹭蹭、犹犹豫豫的混日子，这种念头或者一直持续，或者是不是冒出头来占据你的思维了。于...

C与Java二进制编码转换，补码
在C#与Java接口对接时，需要将图片转化为二进制编码传输，这时候发现c#转换出来的编码的值是0~255的范围，而java方需要的是...
人若没梦想，那跟咸鱼有啥样
博主信息
排名
20
文章
32
粉丝
7
评论
21
文章类别
最新文章
最新评价
关于我们
ICP备案 ：渝ICP备18016597号-1
网站信息：2018-2025TNBLOG.NET
技术交流：群号656732739
联系我们：contact@tnblog.net
公网安备：50010702506256
欢迎加群
欢迎加群交流技术