菜单 搜索
首页 前端知识 情人节程序员用HTML网页表白【可爱的节日贺卡ui动画特效】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

情人节程序员用HTML网页表白【可爱的节日贺卡ui动画特效】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

2024-05-12 00:05:21 前端知识 前端哥 995 308 我要收藏

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用网页告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

  • 一、网页介绍
  • 一、网页效果
  • 二、代码展示
    • 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="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - The Cutest Holiday Card 2021 (Pure CSS)</title>
 
 
<link rel="stylesheet" href="css/style.css">
 
</head>
<body>
 
<section class="container">
  <input type="checkbox" id="card">
  <label class="card" for="card">
    <div class="ear-shadow"></div>
    <div class="ear-shadow ear-shadow_right"></div>
    <div class="eyes"></div>
    <div class="mouth"></div>
    <div class="nose"></div>
    <div class="mustache"></div>
    <div class="mustache mustache_right"></div>
    <div class="paw"></div>
    <div class="paw paw_right"></div>
    <div class="plate">Welcome to 2021</div>
    <div class="card card_back"></div>
  </label>
</section>
<section class="flakes">
  <span class="flake">😷</span>
  <span class="flake">💊</span>
  <span class="flake">🏥</span>
  <span class="flake">🧼</span>
  <span class="flake">🚑</span>
  <span class="flake">🦠</span>
  <span class="flake">🤒</span>
  <span class="flake">💸</span>
  <span class="flake">🧪</span>
  <span class="flake">👩‍⚕️</span>
</section>
 
</body>
</html>
 
 
 
复制

2.CSS代码

/*\
|*| Core
\*/
@import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");
body {
  font-family: "Fredoka One", cursive;
  position: relative;
  overflow: hidden;
  height: 100vh;
  background: conic-gradient(from -90deg at 50% 50%, #eb5757 0deg, #f2994a 90deg, #219653 180deg, #2d9cdb 270deg, #eb5757 360deg);
  perspective: 100vmin;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: radial-gradient(50% 50% at 50% 50%, #eb5757 0%, rgba(235, 87, 87, 0.67) 26.56%, rgba(235, 87, 87, 0) 100%);
}
 
 
/*\
|*| Container
\*/
.container {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-animation: jump 1s ease-in-out alternate infinite;
          animation: jump 1s ease-in-out alternate infinite;
}
@-webkit-keyframes jump {
  from {
    transform: scaleY(1) translateY(-10vmin);
  }
  to {
    transform: scaleY(0.9) translateY(10vmin);
  }
}
@keyframes jump {
  from {
    transform: scaleY(1) translateY(-10vmin);
  }
  to {
    transform: scaleY(0.9) translateY(10vmin);
  }
}
 
/*\
|*| Card
\*/
.card {
  position: relative;
  background: #f5f5f5;
  width: 50vmin;
  height: 70vmin;
  border-radius: 25vmin 25vmin 3vmin 3vmin;
  border-bottom: 0.5vmin solid #777;
  box-shadow: rgba(0, 0, 0, 0.3) 0 0.4vmin 0.4vmin, rgba(0, 0, 0, 0.25) 0 0.8vmin 0.8vmin, rgba(0, 0, 0, 0.2) 0 1.6vmin 1.6vmin;
  cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgBAMAAACBVGfHAAAAGFBMVEUAAADMzMwAAACZZjP/zJlVVVW7u7vA84tnAAAAAXRSTlMAQObYZgAAAKBJREFUKM990DEKAjEQheHAnuARsn0G7eOOYC/ZAywyB7Cx9/6NmTS+RDBdfr6ZYkJQLYHfIq84lAvwjBxuwAomqm+AyZabQeGwYiCLAEAqFLKXB830YkzEw0wSk008OOG9ZjoOGTDsTWaITM5NQJkcAA9d6+4hfkndbSZ2zMQDdN6SfgLN3PsZKIgIstH5pb1a+f7+H8Op/hdLJ4GJj3wAtEwihNsbCogAAAAASUVORK5CYII="), default;
  transform: rotateX(0deg) rotateY(20deg) scale(1);
  transform-style: preserve-3d;
  transition: 1.5s ease-in-out;
  transition-property: transform;
}
.card::after, .card::before {
  content: "";
  position: absolute;
  top: -2vmin;
  left: 8vmin;
  width: 12vmin;
  height: 7vmin;
  border-radius: 6vmin 6vmin 0 0;
  background: #f5f5f5;
  box-shadow: 0 -0.3vmin 0.2vmin rgba(0, 0, 0, 0.1);
}
.card::after {
  transform: rotate(-10deg);
}
.card::before {
  left: calc(50vmin - 12vmin - 8vmin);
  transform: rotate(10deg);
}
.card_back {
  box-shadow: none;
  transform: translateZ(-0.1vmin);
}
 
#card {
  height: 0;
  width: 0;
  position: absolute;
  opacity: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  left: 100%;
}
#card:checked + .card {
  transform: rotateX(360deg) rotateY(-20deg) scale(0.8);
}
 
/*\
|*| Eears' Shadow
\*/
.ear-shadow {
  z-index: 1;
  position: absolute;
  top: -1vmin;
  left: 11vmin;
  width: 8vmin;
  height: 8vmin;
  border-radius: 50%;
  border-top: 0.5vmin solid rgba(180, 0, 0, 0.25);
  transform: rotate(-25deg);
}
.ear-shadow_right {
  transform: rotate(25deg);
  left: calc(50vmin - 8vmin - 11vmin);
}
 
/*\
|*| Eyes
\*/
.eyes {
  z-index: 1;
  position: absolute;
}
.eyes::after, .eyes::before {
  content: "";
  position: absolute;
  top: 15vmin;
  left: 10vmin;
  width: 10vmin;
  height: 10vmin;
  border-radius: 50%;
  border-top: 1vmin solid #111;
}
.eyes::before {
  left: calc(50vmin - 10vmin - 10vmin);
}
 
/*\
|*| Nose
\*/
.nose {
  z-index: 1;
  position: absolute;
  top: 23vmin;
  left: 23.5vmin;
  width: 3vmin;
  height: 2vmin;
  border-radius: 50%;
  background: #d98695;
  box-shadow: inset 0.5vmin 0.3vmin 0.7vmin rgba(255, 255, 255, 0.8);
}
 
/*\
|*| Mouth
\*/
.mouth {
  z-index: 1;
  position: absolute;
}
.mouth::after, .mouth::before {
  content: "";
  position: absolute;
  top: 21.7vmin;
  left: 20.05vmin;
  width: 5vmin;
  height: 5vmin;
  border-radius: 50%;
  border-bottom: 0.7vmin solid #111;
}
.mouth::before {
  left: calc(50vmin - 5vmin - 20.05vmin);
}
 
/*\
|*| Mustache
\*/
.mustache {
  z-index: 1;
  position: absolute;
  top: 24vmin;
  left: 9vmin;
  width: 10vmin;
  height: 2vmin;
  border-radius: 50%;
  border-top: 0.35vmin solid #111;
  transform: rotate(-10deg);
}
.mustache::after, .mustache::before {
  content: "";
  position: absolute;
  top: 1vmin;
  left: 3vmin;
  width: 7vmin;
  height: 2vmin;
  border-radius: 50%;
  border-top: 0.35vmin solid #111;
  transform: rotate(-24deg);
}
.mustache::before {
  top: -1.7vmin;
  left: 2vmin;
  width: 8vmin;
  transform: rotate(19deg);
}
.mustache_right {
  left: calc(50vmin - 10vmin - 9vmin);
  transform: rotate(10deg) scale(-1, 1);
}
 
/*\
|*| Paws
\*/
.paw {
  z-index: 1;
  position: absolute;
  top: 37vmin;
  left: 1vmin;
  width: 12vmin;
  height: 12vmin;
  border-radius: 50%;
  border-right: 0.6vmin solid #111;
  box-shadow: inset -1vmin 1vmin 0 #c8c8c8;
  transform: rotate(45deg);
}
.paw_right {
  left: calc(50vmin - 12vmin - 1vmin);
  transform: rotate(-45deg) scale(-1, 1);
}
 
/*\
|*| Plate
\*/
.plate {
  position: absolute;
  top: 37vmin;
  left: 13vmin;
  width: 24.5vmin;
  height: 12vmin;
  border-radius: 1vmin;
  background-image: linear-gradient(315deg, #d99058 0%, #f8de7e 74%);
  color: rgba(162, 71, 0, 0.5);
  text-shadow: 0.25vmin 0.25vmin 0 #ffe897;
  font-size: 4.5vmin;
  overflow: hidden;
  text-align: center;
  display: flex;
  align-items: center;
  transform: rotate(7deg);
  box-shadow: 0 0.9vmin 0 #6d4c36, rgba(0, 0, 0, 0.15) 0 1.1vmin 0.2vmin, rgba(0, 0, 0, 0.15) 0 1.3vmin 0.4vmin, rgba(0, 0, 0, 0.15) 0 1.7vmin 0.8vmin, rgba(0, 0, 0, 0.15) 0 2.5vmin 1.6vmin, rgba(0, 0, 0, 0.15) 0 4.1vmin 3.2vmin;
}
 
/*\
|*| Flakes of 2020
\*/
.flakes {
  position: relative;
  color: rgba(255, 255, 255, 0.5);
  font-size: 3vmin;
  font-family: ProximaNova, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
 
.flake {
  position: fixed;
  top: -10%;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-animation-name: flakes-fall, flakes-shake-rotate;
          animation-name: flakes-fall, flakes-shake-rotate;
  -webkit-animation-duration: 10s, 3s;
          animation-duration: 10s, 3s;
  -webkit-animation-timing-function: linear, ease-in-out;
          animation-timing-function: linear, ease-in-out;
  -webkit-animation-iteration-count: infinite, infinite;
          animation-iteration-count: infinite, infinite;
  -webkit-animation-play-state: running, running;
          animation-play-state: running, running;
}
@-webkit-keyframes flakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@keyframes flakes-fall {
  0% {
    top: -10%;
  }
  100% {
    top: 100%;
  }
}
@-webkit-keyframes flakes-shake-rotate {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(8vmin) rotate(180deg);
  }
  100% {
    transform: translateX(0px) rotate(360deg);
  }
}
@keyframes flakes-shake-rotate {
  0% {
    transform: translateX(0px) rotate(0deg);
  }
  50% {
    transform: translateX(8vmin) rotate(180deg);
  }
  100% {
    transform: translateX(0px) rotate(360deg);
  }
}
.flake:nth-of-type(0) {
  left: 1%;
  -webkit-animation-delay: 0s, 0s;
          animation-delay: 0s, 0s;
}
.flake:nth-of-type(1) {
  left: 10%;
  -webkit-animation-delay: 1s, 1s;
          animation-delay: 1s, 1s;
}
.flake:nth-of-type(2) {
  left: 20%;
  -webkit-animation-delay: 6s, 0.5s;
          animation-delay: 6s, 0.5s;
}
.flake:nth-of-type(3) {
  left: 30%;
  -webkit-animation-delay: 4s, 2s;
          animation-delay: 4s, 2s;
}
.flake:nth-of-type(4) {
  left: 40%;
  -webkit-animation-delay: 2s, 2s;
          animation-delay: 2s, 2s;
}
.flake:nth-of-type(5) {
  left: 50%;
  -webkit-animation-delay: 8s, 3s;
          animation-delay: 8s, 3s;
}
.flake:nth-of-type(6) {
  left: 60%;
  -webkit-animation-delay: 6s, 2s;
          animation-delay: 6s, 2s;
}
.flake:nth-of-type(7) {
  left: 70%;
  -webkit-animation-delay: 2.5s, 1s;
          animation-delay: 2.5s, 1s;
}
.flake:nth-of-type(8) {
  left: 80%;
  -webkit-animation-delay: 1s, 0s;
          animation-delay: 1s, 0s;
}
.flake:nth-of-type(9) {
  left: 90%;
  -webkit-animation-delay: 3s, 1.5s;
          animation-delay: 3s, 1.5s;
}
 
 
复制

三、精彩专栏

看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/8268.html
标签
element-ui节日HTML网页制作
上一篇：HTML基本结构及基本标签
评论
还可以输入200
共0条数据,当前/页
首页 上一页 下一页 尾页
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

运行npm error code ENOENTnpm error syscall opennpm error path C:\Users\ultra\Desktop\Vue-Project\pac

2024-08-27 09:08:17

前端提高篇（102）：jQuery高级方法callbacks、deferred

2024-05-09 11:05:34

解决npm install 报错 “npm err code 1“

2024-06-06 10:06:47

【常见错误】npm ERR! code CERT_HAS_EXPIRED & errno CERT_HAS_EXPIRED

2024-04-22 09:04:34

vue前端页面弹出红色报错遮罩层 Uncaught runtime errors:at handleError (webpack-internal:///./node_modules/webpack

2024-03-29 15:03:20

npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to https://registry.

2024-04-20 17:04:38

JQuery中的load()、$

2024-05-10 08:05:15

《WEB前端框架开发技术》HTML5响应式旅游景区网站——榆林子州HTML CSS JavaScript (1)

2024-10-30 21:10:12

基于Java SpringBoot Vue HTML5药店管理系统(源码 LW 调试文档 讲解等)/药店管理软件/药店进销存系统/药店库存管理系统/药店销售系统/药品管理系统/药店收银系统

2024-11-10 09:11:04

基于Java SpringBoot Vue HTML5宠物健康顾问系统(源码 LW 调试文档 讲解等)/宠物健康/顾问系统/宠物护理/宠物医疗/宠物保健/宠物咨询/宠物医生/宠物健康管理/宠物健康服务

2024-11-10 09:11:50

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

CSS常用属性（文本属性）

2024-11-04 09:11:111000
3

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
4

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
5

vue使用datav echarts

2024-09-06 00:09:381000
6

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
7

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
8

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
9

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
10

npm的使用

2024-08-18 00:08:131000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！