欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

创意HTML5生日祝福电子卡片网页模版 (适用于浪漫情人节、520表白及告白网页设计,包含CSS3与JS)

最编程 2024-07-22 15:06:24
...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>制作一个程序员的生日快乐代码</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style11.css"> <link rel="stylesheet" href="css/yanhua.css"> <link rel="stylesheet" href="css/style2D.css"> </head> <body> <marquee style="position: fixed; top: 10px; color: #fff" scrollamount="10">Happy birthday! 生日快乐!</marquee> <marquee style="position: fixed; top: 20px; color: #ffd800" scrollamount="3">祝你生日快乐,天天开心!</marquee> <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee> <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee> <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee> <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee> <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee> <marquee style="position: fixed; top: 50px; color: #00ff90" scrollamount="5">祝你生日快乐,没有烦恼!</marquee> <main style="text-align:center;position:absolute;"> <ul class="star" style="--v: 1; --t: 1;"> <li style="--i: 0"></li> </ul> <ul style="--v: 2; --t: 8; --direction:reverse"> <li style="--i: 0"></li> <li style="--i: 1"></li> <li style="--i: 2"></li> <li style="--i: 3"></li> <li style="--i: 4"></li> <li style="--i: 5"></li> <li style="--i: 6"></li> <li style="--i: 7"></li> </ul> <ul style="--v: 3; --t: 12"> <li style="--i: 0"></li> <li style="--i: 1"></li> <li style="--i: 2"></li> <li style="--i: 3"></li> <li style="--i: 4"></li> <li style="--i: 5"></li> <li style="--i: 6"></li> <li style="--i: 7"></li> <li style="--i: 8"></li> <li style="--i: 9"></li> <li style="--i: 10"></li> <li style="--i: 11"></li> </ul> <ul style="--v: 4; --t: 18; --direction:reverse"> <li style="--i: 0"></li> <li style="--i: 1"></li> <li style="--i: 2"></li> <li style="--i: 3"></li> <li style="--i: 4"></li> <li style="--i: 5"></li> <li style="--i: 6"></li> <li style="--i: 7"></li> <li style="--i: 8"></li> <li style="--i: 9"></li> <li style="--i: 10"></li> <li style="--i: 11"></li> <li style="--i: 12"></li> <li style="--i: 13"></li> <li style="--i: 14"></li> <li style="--i: 15"></li> <li style="--i: 16"></li> <li style="--i: 17"></li> </ul> </ul> <p id="message" style="position:relative;margin-top:-40px;z-index:99999"> <img src="img/birthday.png" alt="Alternate Text" /> <br /> </p> </main> <div class="block-audio" style="z-index:10000;"> </div> <canvas id="canvas"></canvas> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/index1.js"></script> <script src="js/script.js"></script> </body> </html>