<!doctype html>
<html>
<head>
<!--声明当前页面的编码集：charset=gbk,gb2312(中文编码)，utf-8国际编码-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--当前页面的三要素--> <title>love you</title> <meta name="Keywords" content="关键词,关键词">
<meta name="description" content="">
<!--css,js-->
<style type="text/css"> *{margin:0;padding:0;}
body {
height: 100%;
width: 100%;
background: #080f1a;
overflow: hidden;
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.glass {
height: 350px;
width: 200px;
background: #122139;
border-radius: 300px 300px 0px 0px;
}
.glass:before {
content: "";
height: 10px;
width: 10px;
transform-origin: center;
border: 10px solid #122139;
border-radius: 100%;
position: absolute;
left: 87px;
top: -25px;
}
.glass:after {
content: "";
position: absolute;
height: 15px;
width: 250px;
background: #a52a2a;
top: 100%;
left: -13%;
}
.shine {
width: 12px;
height: 140px;
background: white;
opacity: 0.2;
position: absolute;
left: 85%;
top: 80px;
border-radius: 100px;
z-index: 10;
}
.shine:before {
content: "";
width: 12px;
height: 20px;
position: absolute;
background: white;
top: 160px;
border-radius: 100px;
}
.petals > div {
position: absolute;
background: #d52d58;
width: 45px;
height: 80px;
top: 55px;
transition: all 0.5s ease-out;
}
.petals > div:nth-child(1) {
border-radius: 15px;
box-shadow: 0px 0px 30px #f594b8;
left: 80px;
top: 60px;
background: #d52d58;
}
.petals > div:nth-child(2), .petals > div:nth-child(4), .petals > div:nth-child(6) {
background: #b81b43;
left: 60px;
border-radius: 0px 30px 0px 30px;
transform-origin: bottom right;
}
.petals > div:nth-child(3), .petals > div:nth-child(5), .petals > div:nth-child(7) {
background: #b81b43;
left: 100px;
border-radius: 30px 0px 30px 0px;
transform-origin: bottom left;
}
.petals > div:nth-child(2) {
z-index: 5;
background: #ab1a3f;
top: 75px;
height: 70px;
box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5);
animation: bloom2 3s ease-in-out;
animation-fill-mode: forwards;
}
.petals > div:nth-child(3) {
z-index: 4;
background: #ab1a3f;
top: 75px;
height: 70px;
box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5);
animation: bloom3 3s ease-in-out, glowing 2.5s ease-in-out infinite;
animation-fill-mode: forwards;
}
.petals > div:nth-child(4) {
z-index: 3;
background: #b81b43;
top: 70px;
height: 75px;
box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5);
animation: bloom4 3s ease-in-out, glowing 2.5s ease-in-out infinite;
animation-fill-mode: forwards;
}
.petals > div:nth-child(5) {
z-index: 2;
background: #b81b43;
top: 70px;
height: 75px;
box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.5);
animation: bloom5 3s ease-in-out, glowing 2.5s ease-in-out infinite;
animation-fill-mode: forwards;
}
.petals > div:nth-child(6) {
z-index: 1;
background: #c9204b;
top: 65px;
height: 70px;
box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3);
animation: bloom6 3s ease-in-out, glowing 2.5s ease-in-out infinite;
animation-fill-mode: forwards;
}
.petals > div:nth-child(7) {
z-index: 0;
background: #c9204b;
top: 65px;
height: 70px;
box-shadow: 0px 0px 50px rgba(245, 148, 184, 0.3);
animation: bloom7 3s ease-in-out, glowing 2.5s ease-in-out infinite;
animation-fill-mode: forwards;
}
.deadPetals > div {
position: absolute;
background: #d52d58;
width: 20px;
height: 15px;
top: 120px;
border-radius: 0px 30px 0px 30px;
box-shadow: 0px 0px 30px rgba(245, 148, 184, 0.5);
transition: all 0.5s ease-out;
}
.deadPetals > div:nth-child(1) {
left: 106px;
transform: rotate(-30deg);
animation: falling 20s 4s ease-in-out infinite;
}
.deadPetals > div:nth-child(2) {
left: 67px;
transform: rotate(-30deg);
animation: falling 20s 8s ease-in-out infinite;
}
.deadPetals > div:nth-child(3) {
left: 63px;
transform: rotate(-30deg);
animation: falling 20s 12s ease-in-out infinite;
}
.deadPetals > div:nth-child(4) {
left: 90px;
transform: rotate(-30deg);
animation: falling 20s 16s ease-in-out infinite;
}
.leaves > div:nth-last-child(1) {
position: absolute;
width: 55px;
height: 30px;
background: #338f37;
top: 120px;
left: 75px;
border-radius: 100px;
}
.leaves > div:nth-child(1) {
position: absolute;
width: 6px;
height: 210px;
background: #054c05;
top: 95px;
left: 100px;
border-radius: 0 0 100px 100px;
}
.leaves > div:nth-child(2) {
position: absolute;
width: 30px;
height: 50px;
top: 53px;
border-radius: 5px 40px 20px 40px;
background: #054c05;
transform-origin: bottom;
transform: rotate(-30deg);
top: 180px;
left: 80px;
box-shadow: inset 5px 5px #066406;
}
.leaves > div:nth-child(3) {
position: absolute;
width: 30px;
height: 50px;
top: 53px;
border-radius: 40px 5px 40px 20px;
background: #054c05;
transform-origin: bottom;
transform: rotate(30deg);
top: 150px;
left: 95px;
box-shadow: inset -5px 5px #066406;
}
.thorns > div {
position: absolute;
width: 0;
height: 0;
top: 140px;
}
.thorns > div:nth-child(odd) {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #054c05;
left: 105px;
}
.thorns > div:nth-child(even) {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #054c05;
left: 95px;
}
.thorns > div:nth-child(1) {
top: 200px;
}
.thorns > div:nth-child(2) {
top: 170px;
}
.thorns > div:nth-child(4) {
top: 230px;
}
@keyframes bloom2 {
50% {
transform: rotate(-90deg);
top: 200px;
left: 100px;
}
100% {
transform: rotate(-60deg);
top: 252px;
left: 50px;
background: #71122a;
box-shadow: 0px 0px 0px rgba(245, 148, 184, 0);
}
}
@keyframes bloom3 {
100% {
transform: rotate(45deg);
}
}
@keyframes bloom4 {
100% {
transform: rotate(-20deg);
}
}
@keyframes bloom5 {
100% {
transform: rotate(20deg);
}
}
@keyframes bloom6 {
100% {
transform: rotate(-5deg);
}
}
@keyframes bloom7 {
100% {
transform: rotate(5deg);
}
}
@keyframes glowing {
50% {
background: #d7365f;
box-shadow: 0px 0px 60px #f594b8;
}
}
@keyframes falling {
20% {
top: 335px;
background: #9d193b;
box-shadow: 0px 0px 0px rgba(245, 148, 184, 0);
}
100% {
top: 335px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="container">
<div class="glass">
<div class="shine"></div>
</div>
<div class="thorns">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="leaves">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="petals">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="deadPetals">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="sparkles">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>
