用HTML语言制作一个非常浪漫的生日祝福网，手把手教你制作炫酷生日祝福网页_用html做一个生日快乐网页-程序员宅基地

技术标签： web前端 css html生日祝福网站制作 js 表白网站制作 html

一、网页介绍

明天就是女朋友的生日了, 是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意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>

️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);
  }
}

四、获取源码

1.如果我的博客对你有帮助 请 “点赞” “️评论” “收藏” 一键三连哦！

2.【关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板、大学生毕业HTML模板、等!

以上内容技术相关问题欢迎一起交流学习

本文链接：https://blog.csdn.net/bigwhiteshark/article/details/127552737

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

搭建智慧农业物联网云平台——基于阿里云物联网平台构建_写一个农业云平台系统出来有多难-程序员宅基地

文章浏览阅读1.9w次，点赞32次，收藏469次。目录前言8.1.1 物联网平台搭建8.2.1 LinkDevelop平台使用8.2.2 iotkit-embedded前言传统的物联网项目，需要嵌入式硬件、云平台。对于我们做嵌入式的来说，从零开始搭建一个物联网云平台几乎是不现实的。这里涉及到许多前后端的知识。通过阿里云物联网平台，我们可以在不懂前后端开发的基础上，半个小时候左右就可以搭建一个智慧农业的物联网云平台框架。效果如下：大数据面板：设备管理：设备地图分布：支持视频监控..._写一个农业云平台系统出来有多难

CFD后处理出图软件Tecplot的操作技巧（未完待续）_tecplot插值方法-程序员宅基地

python3.7通过itchat方式登录微信给好友发送天气信息_ichatpython微信-程序员宅基地

文章浏览阅读1.3k次，点赞2次，收藏4次。环境：win7，python3.7安装好 ichat，requests，yaml，Schedule（定时功能使用）准备一份全国地区的code；参照图一：citys.yml需先了解全国天气相关接口API：思路：想通过输入一个城市名就可以打印出相关天气信息；由于yml配置文件只有城市名：城市代码code通过城市名去获取code，在把code 引用到URL路径上进行对每个城市的天气信息进行爬..._ichatpython微信

路由器端口介绍-程序员宅基地

文章浏览阅读1.5w次，点赞14次，收藏61次。路由器所在的网络位置比较复杂，既可是内部子网边缘，也可位于内、外部网络边缘。同时为了实现强大的适用性，它需要连接各种网络，这样，它的接口也就必须多种多样。对于这些，不要说一般的网络爱好者，就连许多网管人员都无法说清楚。这里向大家全面介绍路由器的各种接口及连接方法。一、路由器接口路由器具有非常强大的网络连接和路由功能，它可以与各种各样的不同网络进行物理连接，这就决定了路由器的接口技术非常复杂，越是高档的路由器其接口种类也就越多，因为它所能连接的网络类型越多。路由器的端口主要分局域网端口、广域网端口..._路由器端口

使用ps制作食物网页_ps美食网页制作步骤-程序员宅基地

文章浏览阅读762次。使用Ps制作食物网页（作者：李文成，撰写时间：2019年4月7日）软件：Adobe Photoshop CC 2018（PS），首先打开Ps新建一个图层，使用矩形工具（U）拉出一个矩形，颜色为：#d6caca，再使用横排文字工具（T）将文字打上去，文字大小为：13，颜色为：#333333，注意字体间距要一样，字体大小也要一样，旁边购物袋是使用椭圆工具（U）跟矩形工具制作成的，利用图层的叠放制..._ps美食网页制作步骤

PHP_substr()函数_截取字符串_定义chinesesubstr()函数处理_英文截取_中文截取_substr中文英文-程序员宅基地

文章浏览阅读1.8k次。function chinese?>_substr中文英文

随便推点

字体图标 fa fa html5,Font Awesome 4.2.0的所有图标参考-程序员宅基地

文章浏览阅读4k次。 fa-adjust [] fa-adn [] fa-align-center [] fa-align-justify [] fa-align-left [] fa-align-right [] fa-ambulance [] fa-anchor [] fa-android [] fa-angellist [] fa-angle-double-down [..._fa fa图标

组装一台计算机需要哪些硬件(写出配置),电脑组装知识网组装电脑配置单中都有哪些配置组装电脑需要的电脑硬件...-程序员宅基地

文章浏览阅读9.7k次。本文转自：http://www.dn010.com/zhuangji/651.html比起直接购买装好的品牌电脑，很多人更喜欢自己买配置来组装一台电脑。组装电脑可以完全按照自己的喜好，组装出最适合自己的电脑。而且组装电脑的价格也相对来说比较划算，是一种很实用的方法。那么组装电脑需要购买一些什么样子的东西呢?今天，就来带大家总结一下组装电脑需要的配置单吧。1、电脑硬件：组装电脑最先要购买的就是电脑的..._电脑硬件怎么搭配

mh采样算法推导_深度学习：Gibbs 采样-程序员宅基地

文章浏览阅读1.9k次。1. 什么是Gibbs采样Gibbs采样是MH算法的一种特例(α==1)，因此可以保证Gibbs抽取的样本，也构成一个非周期不可约稳定收敛的马氏链；Gibbs采样适用于样本是两维或以上的情况；通过积分去除掉相关但是不感兴趣的变量，称为“collapsed”的Gibbs采样；并且个人的一个感觉是，观测量所直接依赖的那些变量是不能被积分掉的，否则无法有效的进行抽样…gibbs采样需要知道样本中一个属性..._mh抽样

Java+JSP+Mysql+Tomcat实现Web图书管理系统-程序员宅基地

文章浏览阅读7.8w次，点赞221次，收藏1.5k次。图书管理系统一、系统介绍1.软件环境2.功能模块图2.系统功能3.数据库表4.工程截图二、系统展示1.系统注册2.系统登录3.找回密码4.管理员-主页5.管理员-用户管理主页6.管理员-新增用户7.管理员-修改用户8.管理员-借阅信息管理9.管理员-图书管理主页10.管理员-新增图书11.管理员-修改图书12.用户-主页13.用户-图书明细查看14.用户-新增留言15.用户-借阅信息管理16.用户-书架管理三、代码实现BookUserRecordCommentBookShelfBookDaoBookShel_图书管理系统

lib文件夹的作用和配置lib文件-程序员宅基地

文章浏览阅读2.8k次，点赞2次，收藏7次。lib文件夹的作用和配置lib文件_lib文件

GJB 438C-2021军用软件开发文档通用要求_gjb438c电子版下载-程序员宅基地

文章浏览阅读7.2k次，点赞30次，收藏4次。【lfsc】_gjb438c电子版下载