让她/他心动的520/521告白方法（9个方法+链接+代码，原生HTML+CSS+JS实现）
Posted 小丫么小牛马
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了让她/他心动的520/521告白方法（9个方法+链接+代码，原生HTML+CSS+JS实现）相关的知识，希望对你有一定的参考价值。
文章目录
- 一、pikachu告白信件
- 二、告白小宇宙
- 三、流光爱心
- 四、520贺卡（1）
- 五、520贺卡（2）
- 六、告白信封
- 1.效果图
- 2.代码
- 七、for love满屏爱心
- 八、摇晃的红酒杯~
- 九、信封（2）
- 十、链接
- 总结
一、pikachu告白信件
详细步骤教程（https://blog.csdn.net/weixin_44009656/article/details/124822366?utm_source=app&app_version=5.4.0&code=app_1562916241&uLinkId=usr1mkqgl919blen）
1.效果图
2.代码
1.envelope.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>envelope</title>
<link rel="stylesheet" href="envelope.css">
</head>
<body>
<div class="container" >
<div class="envelope" ></div>
<div class="card" id="test">
<!-- 添加文案-->
<h1 class="message" >WILL YOU BE MY VALENTINE?</h1>
<div class="pikachu">
<div class="limbs"></div>
<div class="heart"></div>
<div class="arms"></div>
<div class="smile"></div>
</div>
</div>
<div class="cover"></div>
<div class="lid"></div>
<div class="shadow"></div>
</div>
<script>
window.onload = function ()
var go = document.getElementById("test");
go.onclick = function ()
location.href = "./pikachu.html"
</script>
</body>
</html>
2.envelope.css
@import url('https://fonts.googleapis.com/css2?family=Pangolin&display=swap');
/*重置浏览器样式*/
*
margin: 0;
padding: 0;
/*
使主体居中
vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
vh：视窗高度的百分比
*/
body
height: 100vh;
width: 100vw;
background: #FFE3EC;
font-family: 'Pangolin', cursive;
font-size: 1vmin;
/*弹性布局*/
display: flex;
/*设置flex子项在每个flex行的交叉轴上的中心对齐，交叉轴方向为column，即垂直方向**/
align-items: center;
/*设置flex子项在主轴上的中心对齐*/
justify-content: center;
/*
使用相对定位（什么时候用相对定位或绝对定位？在文档流中相对定位的元素占有位置，而且会影响后面的元素（块元素、行内块元素），比如两个div并排，另外一个会换行。而绝对定位就是把该元素从文档流中踢出，不会占用文档流的位置，也不会影响后面的元素。）
vmin：当前 vw 和 vh 中较小的一个值
vmax：当前 vw 和 vh 中较大的一个值
*/
.container
position: relative;
top: 0vmin;
/*相对定位，并设置背景色和大小*/
.envelope
position: relative;
background: #eb7885;
height: 30vmin;
width: 48vmin;
/*.cover */
/* position: absolute;*/
/* height: 0;*/
/* width: 0;*/
/* border-bottom: 15vmin solid #f5b5bb;*/
/* border-left: 24vmin solid transparent;*/
/* border-right: 24vmin solid transparent;*/
/* top: 15vmin;*/
/* z-index: 3;*/
/**/
/*.cover::after !*left triangle*!*/
/* position: absolute;*/
/* content: '';*/
/* border-left: 24.5vmin solid #0a0a0a;*/
/* border-bottom: 15vmin solid transparent;*/
/* border-top: 15vmin solid transparent;*/
/* top: -15vmin;*/
/* left: -24vmin;*/
/**/
/*.cover::before */
/* position: absolute;*/
/* content: '';*/
/* border-right: 24.5vmin solid #0a0a0a;*/
/* border-bottom: 15vmin solid transparent;*/
/* border-top: 15vmin solid transparent;*/
/* top: -15vmin;*/
/* left: -0.5vmin;*/
/**/
.cover
position: absolute;
height: 0;
width: 0;
border-bottom: 15vmin solid #f5b5bb;
border-left: 24vmin solid transparent;
border-right: 24vmin solid transparent;
top: 15vmin;
z-index: 3;
.cover::after /*left triangle*/
position: absolute;
content: '';
border-left: 24.5vmin solid #ffbbc1;
border-bottom: 15vmin solid transparent;
border-top: 15vmin solid transparent;
top: -15vmin;
left: -24vmin;
.cover::before
position: absolute;
content: '';
border-right: 24.5vmin solid #ffbbc1;
border-bottom: 15vmin solid transparent;
border-top: 15vmin solid transparent;
top: -15vmin;
left: -0.5vmin;
/*创建信件打开的动画，使用rotateX()，围绕其在给定的度数在x轴旋转*/
@keyframes open
100%
transform: rotatex(180deg);
/*信件合上的动画*/
@keyframes open-rev
from
transform: rotatex(-180deg);
.lid
position: absolute;
height: 0;
width: 0;
border-top: 15vmin solid #ff8896;
border-left: 24vmin solid transparent;
border-right: 24vmin solid transparent;
top: 0;
/*设置旋转元素的基点位置，为盒子的顶部边缘*/
transform-origin: top;
animation: open-rev 2s;
.container:hover .lid
animation: open 0.5s;
animation-fill-mode: forwards;
@keyframes slide
100%
transform: translatey(-15vmin);
z-index: 2;
@keyframes slide-rev
from
transform: translatey(-15vmin);
.card
position: absolute;
/*白色的卡片*/
background: white;
height: 25vmin;
width: 43vmin;
display: flex;
/*设置div水平显示*/
flex-direction: column;
/*设置flex子项在每个flex行的交叉轴上的中心对齐，交叉轴方向为column，即垂直方向**/
align-items: center;
/*设置flex子项在主轴上的中心对齐*/
justify-content: center;
left: 2.5vmin;
top: 0vmin;
animation: slide-rev 0.2s ease-out;
.message
position: absolute;
top: 5vmin;
.pikachu
position: absolute;
background: #f9ebaa;
height: 8vmin;
width: 10vmin;
border-radius: 40%;
top: 15vmin;
display: flex;
.pikachu::before
content: '';
position: absolute;
background: #f9ebaa;
height: 6vmin;
width: 9vmin;
border-radius: 90% 90% 60% 60%;
top: -4vmin;
left: 0.5vmin;
.pikachu::after
content: '';
position: absolute;
background: transparent;
height: 1vmin;
width: 1vmin;
top: 2vmin;
left: -1.5vmin;
color: #4a4947;
border-radius: 50%;
box-shadow:
4vmin -3.5vmin, 8vmin -3.5vmin,
2vmin -2vmin #fad598, 10vmin -2vmin #fad598,
3vmin 5vmin #f9ebaa, 9.3vmin 5vmin #f9ebaa;
.limbs
position: relative;
width: 0;
height: 0;
border-left: 1vmin solid transparent;
border-right: 1vmin solid transparent;
border-bottom: 6vmin solid #f9ebaa;
border-radius: 80%;
top: -6vmin;
left: 1vmin;
transform: rotate(-20deg);
.limbs::before
content: '';
position: absolute;
background: #f9ebaa;
width: 5vmin;
height: 2vmin;
border-radius: 40%;
top: 10vmin;
left: 4vmin;
box-shadow:
-1vmin 1.5vmin #f9ebaa;
.limbs::after
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 1vmin solid transparent;
border-right: 1vmin solid transparent;
border-bottom: 6vmin solid #f9ebaa;
border-radius: 80%;
top: 3vmin;
left: 5vmin;
transform: rotate(40deg);
.heart
position: relative;
width: 5vmin;
height: 4vmin;
top: 2vmin;
left: 0.6vmin;
.heart:before,
.heart:after
position: absolute;
content: "";
left: 2.5vmin;
top: 0;
width: 2.5vmin;
height: 4vmin;
background: #fc978b;
border-radius: 2.5vmin 2.5vmin 0 0;
transform: rotate(-45deg);
transform-origin: 0 100%;
.heart:after
left: 0;
transform: rotate(45deg);
transform-origin: 100% 100%;
.smile
position: relative;
background: transparent;
height: 1vmin;
width: 1vmin;
border-radius: 50%;
border-bottom: 0.3vmin solid #4a4947;
left: -5vmin;
top: -1.3vmin;
.smile::before
position: absolute;
content: '';
background: transparent;
height: 1vmin;
width: 1vmin;
border-radius: 50%;
border-bottom: 0.3vmin solid #4a4947;
left: 0.7vmin;
.arms
position: relative;
background: #f9ebaa;
width: 4.2vmin;
height: 2vmin;
border-radius: 60% 60% 90% 60% / 50% 50% 90% 90%;
top: 3vmin;
left: -5vmin;
.arms::after
content: '';
position: absolute;
background: #f9ebaa;
width: 4vmin;
height: 2vmin;
border-radius: 60% 60% 90% 60% / 50% 50% 90% 90%;
left: 5vmin;
top: 0vmin;
.container:hover .card
animation: slide 0.2s;
animation-delay: 0.5s;
animation-fill-mode: forwards;
.shadow
position: relative;
top: 3vmin;
border-radius: 50%;
opacity: 0.7;
height: 2vmin;
width: 48vmin;
background: #e8c5d0;
3.pikachu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>pikachu</title>
<link rel="stylesheet" href="pikachu.css">
</head>
<body>
<div class="wrapper">
<h2>Will you be my valentine?</h2>
<div class="pikachu">
<div class="head">
<div class="ears left brown"><div class="ears-inside yellow"></div></div>
<div class="ears right brown"><div class="ears-inside yellow"></div></div>
<div class="face yellow">
<span class="eye left brown"></span>
<span class="eye right brown"></span>
<span class="mouth">w</span>
<span class="cachete left"></span>
<span class="cachete right"></span>
</div>
</div>
<div class="body yellow">
<div class="heart"></div>
<div class="paw left yellow"></div>
<div class="paw right yellow"></div>
</div>
<div class="leg left yellow-dark"></div>
<div class="leg right yellow-dark"></div>
<div class="tail yellow-dark"></div>
</div>
</div>
</body>
</html>
4.pikachu.css
@import url(https://fonts.googleapis.com/css?family=Loved+by+the+King);
body,html
background: #FFE3EC;
height:100%;
font-family: 'Loved by the King', cursive;
div, ul, span
display: block; position: absolute;
margin: auto; padding: 0;
top给Lumia 520/521/525/526/720刷Android系统