1500字范文 > 情人节程序员用HTML网页表白【可爱的节日贺卡ui动画特效】 HTML5七夕情人节表白网页

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

时间：2023-03-01 09:51:54

这是程序员表白系列中的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="en" ><head><meta charset="UTF-8"><title>CodePen - The Cutest Holiday Card (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 </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("/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 \*/.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;}