首页 > 分享 > 用HTML语言制作一个非常浪漫的生日祝福网，手把手教你制作炫酷生日祝福网页

用HTML语言制作一个非常浪漫的生日祝福网，手把手教你制作炫酷生日祝福网页

花匠小妙招
2024-12-01 07:42

一、网页介绍

明天就是女朋友的生日了, 是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

二、网页效果

▶️视频演示

HTML生日祝福网页制作（粉色主题）程序员专属生日表白网站

图片演示

在这里插入图片描述

三、️网页代码

注:以下代码为部分演示,如需完整源码请看文章末尾

HTML代码

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>生日快乐</title> <link rel="stylesheet" type="text/css" href="css/index.css" /> </head> <body> <div class="htmleaf-container"> <div class="wrapper"> <div class="container"> <h1>生日快乐</h1> <form class="form"> <input id="userName" name="userName" type="text" value="" placeholder="姓名" /> <input id="pwd" name="pwd" type="password" placeholder="密码" /> <button type="submit" id="login-button">进入</button> </form> </div> <ul class="bg-bubbles"> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> <li> <img src="./img/timg.gif" style="width: 100%; height: 100%" /> </li> </ul> </div> </div><audio src="music/1.mp3" autoplay="autoplay" loop="loop"> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script src="js/index.js" type="text/javascript"></script> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172

❄️CSS代码

* { box-sizing: border-box; margin: 0; padding: 0; font-weight: 300; } body { font-family:"Microsoft YaHei"; color: white; font-weight: 300; } body ::-webkit-input-placeholder { /* WebKit browsers */ font-family:"Microsoft YaHei"; color: white; font-weight: 300; } body :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-family:"Microsoft YaHei"; color: white; opacity: 1; font-weight: 300; } body ::-moz-placeholder { /* Mozilla Firefox 19+ */ font-family:"Microsoft YaHei"; color: white; opacity: 1; font-weight: 300; } body :-ms-input-placeholder { /* Internet Explorer 10+ */ font-family:"Microsoft YaHei"; color: white; font-weight: 300; } .wrapper { background: #ee9ca7; background: -webkit-linear-gradient(top left, #ee9ca7 0%, #ee9ca7 100%); background: linear-gradient(to bottom right, #ee9ca7 0%, #ee9ca7 100%); background-color:rgba(255,255,255,0.9); position: absolute; top:0; left: 0; width: 100%; height: 100%; overflow: hidden; } .wrapper.form-success .container h1 { -webkit-transform: translateY(85px); -ms-transform: translateY(85px); transform: translateY(85px); } .container { max-width: 600px; margin: 0 auto; margin-top: 7%; padding: 80px 0; height: 400px; text-align: center; } .container h1 { font-size: 40px; -webkit-transition-duration: 1s; transition-duration: 1s; -webkit-transition-timing-function: ease-in-put; transition-timing-function: ease-in-put; font-weight: 200; } form { padding: 20px 0; position: relative; z-index: 2; } form input { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; border: 1px solid rgba(255, 255, 255, 0.4); background-color: rgba(255, 255, 255, 0.2); width: 250px; border-radius: 3px; padding: 10px 15px; margin: 0 auto 10px auto; display: block; text-align: center; font-family: "Microsoft YaHei"; font-size: 18px; color: white; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; font-weight: 300; } form input:hover { background-color: rgba(255, 255, 255, 0.4); } form input:focus { background-color: white; width: 300px; color: #ee9ca7; } form button { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: 0; background-color: white; font-family: "Microsoft YaHei"; border: 0; padding: 10px 15px; color: #ee9ca7; border-radius: 3px; width: 250px; cursor: pointer; font-size: 18px; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; } form button:hover { background-color: #f5f7f9; } .bg-bubbles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } @keyframes square { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-900px) rotate(600deg); transform: translateY(-900px) rotate(600deg); } }

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150