當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
HTML5生日祝福网页代码【粉色生日快乐模板】HTML+CSS+JavaScript
生活随笔
收集整理的這篇文章主要介紹了
HTML5生日祝福网页代码【粉色生日快乐模板】HTML+CSS+JavaScript
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這是程序員表白系列中的100款網站表白之一，旨在讓任何人都能使用并創建自己的表白網站給心愛的人看。 此波共有100個表白網站，可以任意修改和使用，很多人會希望向心愛的男孩女孩告白，生性靦腆的人即使那個TA站在眼前都不敢向前表白。說不出口的話就用短視頻告訴TA吧~制作一個表白網頁告訴TA你的心意,演示如下。
文章目錄
- 一、網頁介紹
- 一、網頁效果
- 二、代碼展示
- 1.HTML代碼
- 2.CSS代碼
- 三、精彩專欄推薦：
一、網頁介紹
1 網頁簡介：基于 HTML+CSS+JavaScript 制作七夕情人節表白網頁、生日祝福、七夕告白、 求婚、浪漫愛情3D相冊、炫酷代碼 ,快來制作一款高端的表白網頁送(他/她)浪漫的告白,制作修改簡單,可自行更換背景音樂,文字和圖片即可使用
2.網頁編輯：任意HTML編輯軟件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作）。
一、網頁效果
二、代碼展示
1.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>Happy Birthday</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"><inputid="userName"name="userName"type="text"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>2.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; } .bg-bubbles li {position: absolute;list-style: none;display: block;width: 40px;height: 40px;background-color: rgba(255, 255, 255, 0.15);bottom: -160px;-webkit-animation: square 30s infinite;animation: square 30s infinite;-webkit-transition-timing-function: linear;transition-timing-function: linear; } .bg-bubbles li:nth-child(1) {left: 10%; } .bg-bubbles li:nth-child(2) {left: 20%;width: 80px;height: 80px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 17s;animation-duration: 17s; } .bg-bubbles li:nth-child(3) {left: 25%;-webkit-animation-delay: 4s;animation-delay: 4s; } .bg-bubbles li:nth-child(4) {left: 40%;width: 60px;height: 60px;-webkit-animation-duration: 22s;animation-duration: 22s;background-color: rgba(255, 255, 255, 0.25); } .bg-bubbles li:nth-child(5) {left: 70%; } .bg-bubbles li:nth-child(6) {left: 80%;width: 120px;height: 120px;-webkit-animation-delay: 3s;animation-delay: 3s;background-color: rgba(255, 255, 255, 0.2); } .bg-bubbles li:nth-child(7) {left: 32%;width: 160px;height: 160px;-webkit-animation-delay: 7s;animation-delay: 7s; } .bg-bubbles li:nth-child(8) {left: 55%;width: 20px;height: 20px;-webkit-animation-delay: 15s;animation-delay: 15s;-webkit-animation-duration: 40s;animation-duration: 40s; } .bg-bubbles li:nth-child(9) {left: 25%;width: 10px;height: 10px;-webkit-animation-delay: 2s;animation-delay: 2s;-webkit-animation-duration: 40s;animation-duration: 40s;background-color: rgba(255, 255, 255, 0.3); } .bg-bubbles li:nth-child(10) {left: 90%;width: 160px;height: 160px;-webkit-animation-delay: 11s;animation-delay: 11s; } @-webkit-keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-900px) rotate(600deg);transform: translateY(-900px) rotate(600deg);} } @keyframes square {0% {-webkit-transform: translateY(0);transform: translateY(0);}100% {-webkit-transform: translateY(-900px) rotate(600deg);transform: translateY(-900px) rotate(600deg);} }三、精彩專欄推薦：
看到這里了就 【點贊，好評，收藏】 三連 支持下吧，你的支持是我創作的動力。
總結
以上是生活随笔為你收集整理的HTML5生日祝福网页代码【粉色生日快乐模板】HTML+CSS+JavaScript的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 纯CSS实现锚点跳转位置上下偏移的办法
- 下一篇： gradle idea java ssm