@import url("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to right, #9a137b34, #e029af33), url(bgrMail.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.wrapper {
position: relative;
width: 300px;
height: 320px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.4);
box-shadow: 5px 2px 8px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(3px);
border-radius: 5px;
transition: all 0.25s;
flex-direction: column;
overflow: hidden;
}
.wrapper.active {
width: 400px;
height: 600px;
}
.loader {
position: relative;
width: 250px;
height: 250px;
}
.cardHover {
position: absolute;
width: 250px;
height: 250px;
perspective: 1000px;
display: flex;
justify-content: center;
align-items: center;
top: 0;
}
.box-heart {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
animation: loaderElectron 0.5s alternate infinite;
z-index: -1;
}
.heart {
position: absolute;
background: url("heart.png");
background-size: cover;
width: 120px;
height: 120px;
filter: drop-shadow(0 0 10px red) drop-shadow(0 0 40px red)
drop-shadow(0 0 60px red);
}
@keyframes loaderElectron {
0% {
transform: scale(0.9);
}
100% {
transform: scale(1.1);
}
}
.inner {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
}
.inner.one {
left: 0%;
top: 0%;
animation: rotate-one calc(var(--i) * 1s) linear infinite;
border-bottom: 4px solid red;
border-right: 4px solid red;
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 5px red);
}
.inner.one::before {
position: absolute;
content: "";
background: url("heart.png");
background-size: cover;
width: 30px;
height: 30px;
z-index: 10000000s;
top: 40%;
transform: translate(-50%, 30%);
}
.inner.two {
right: 0%;
top: 0%;
animation: rotate-two calc(var(--i) * 1s) linear infinite;
border-right: 4px solid red;
border-top: 4px solid red;
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 5px red);
}
.inner.two::before {
position: absolute;
content: "";
background: url("heart.png");
background-size: cover;
width: 30px;
height: 30px;
right: 50%;
bottom: 0;
transform: translate(30%, 50%);
}
.inner.three {
right: 0%;
bottom: 0%;
animation: rotate-three calc(var(--i) * 1s) linear infinite;
border-top: 4px solid red;
border-left: 4px solid red;
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red);
}
.inner.three::before {
position: absolute;
background: url("heart.png");
background-size: cover;
width: 30px;
height: 30px;
content: "";
right: 2px;
top: 50%;
transform: translate(50%, -120%);
}
@keyframes rotate-one {
0% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
}
}
@keyframes rotate-two {
0% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
}
100% {
transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
}
}
@keyframes rotate-three {
0% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
}
100% {
transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
}
}
.wrapper button {
position: relative;
padding: 10px 20px;
top: 120px;
background: rgb(255, 69, 109);
color: #fff;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.5s;
font-weight: 600;
}
button p {
transition: all 0.5s ease-in-out;
}
button:hover p {
transform: scale(1.1);
}
.wrapper button:hover {
background: rgb(222, 24, 67);
}
.content {
position: relative;
top: 20px;
width: 350px;
height: 280px;
background: #fff;
opacity: 0;
pointer-events: none;
}
.content h1 {
opacity: 0;
pointer-events: none;
text-align: center;
font-family: "Dancing Script", cursive;
font-size: 28px;
}
.content > p {
opacity: 0;
pointer-events: none;
margin-top: 10px;
font-family: "Dancing Script", cursive;
padding: 0 15px;
font-size: 19px;
}
.content i {
position: absolute;
opacity: 0;
top: 5px;
right: 5px;
cursor: pointer;
}
.wrapper.active .content {
opacity: 1;
pointer-events: visible;
}
.wrapper.active h1 {
transition: all 0.5s;
animation: text1 1s forwards ease-in-out 0.5s;
}
.wrapper.active p {
animation: text1 1s forwards ease-in-out 1s;
}
.wrapper.active i {
animation: text1 1s forwards ease-in-out 1.3s;
}
@keyframes text1 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Gửi em!
"💞Anh ước rằng mình có thể gặp em sớm hơn thì những vất vả mà em trải
qua sẽ có anh bên cạnh.💗 Từ nay về sau, trách nhiệm của anh là chăm
sóc và thay em gánh chịu khó khăn. Vì thế, hãy thật hạnh phúc và vui
vẻ, đừng bận tâm về thế giới, vì xung quanh em chính là anh. Chúc em
8/3 ấm áp, mãi yêu em.💞"