♥
♥
♥
♥
♥
/* =========================
LỚP CÁNH HOA MỜ PHÍA SAU
========================= */
.petal-blur{
position:absolute;
top:-100px;
width:38px;
height:52px;
/* opacity khoảng 30% */
opacity:.30;
background:
radial-gradient(
circle at 30% 22%,
rgba(255,255,255,.9) 0%,
rgba(255,221,231,.9) 25%,
rgba(255,158,188,.85) 65%,
rgba(241,96,139,.8) 100%
);
border-radius:
75% 25% 70% 30%;
/*
Blur tạo cảm giác nằm
phía sau tiêu điểm
*/
filter:
blur(3px)
drop-shadow(
0 5px 10px
rgba(235,90,130,.12)
);
transform-origin:center;
animation:
petalBlurFall
28s
linear
infinite;
will-change:transform;
/*
Nếu muốn thật sự nằm
phía sau cánh rõ
*/
z-index:-1;
}
/* ánh sáng nhẹ */
.petal-blur:before{
content:"";
position:absolute;
width:50%;
height:45%;
top:10%;
left:12%;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(255,255,255,.65),
rgba(255,255,255,0)
);
}
/* =========================
QUỸ ĐẠO CÁNH MỜ
========================= */
@keyframes petalBlurFall{
0%{
transform:
translate3d(
0,
-100px,
0
)
rotate(-20deg)
rotateY(0deg);
}
20%{
transform:
translate3d(
45px,
20vh,
0
)
rotate(75deg)
rotateY(90deg);
}
40%{
transform:
translate3d(
-30px,
43vh,
0
)
rotate(160deg)
rotateY(170deg);
}
60%{
transform:
translate3d(
55px,
65vh,
0
)
rotate(250deg)
rotateY(260deg);
}
80%{
transform:
translate3d(
-35px,
88vh,
0
)
rotate(340deg)
rotateY(350deg);
}
100%{
transform:
translate3d(
40px,
115vh,
0
)
rotate(460deg)
rotateY(440deg);
}
}
/* =========================
VỊ TRÍ NGẪU NHIÊN
========================= */
.b1{
left:4%;
width:44px;
height:58px;
animation-duration:33s;
animation-delay:-18s;
}
.b2{
left:17%;
width:32px;
height:45px;
animation-duration:28s;
animation-delay:-8s;
}
.b3{
left:31%;
width:52px;
height:68px;
animation-duration:36s;
animation-delay:-26s;
}
.b4{
left:46%;
width:37px;
height:50px;
animation-duration:30s;
animation-delay:-14s;
}
.b5{
left:59%;
width:48px;
height:64px;
animation-duration:35s;
animation-delay:-23s;
}
.b6{
left:72%;
width:34px;
height:47px;
animation-duration:29s;
animation-delay:-5s;
}
.b7{
left:84%;
width:55px;
height:72px;
animation-duration:38s;
animation-delay:-30s;
}
.b8{
left:95%;
width:40px;
height:55px;
animation-duration:32s;
animation-delay:-11s;
}
/* =========================
MOBILE
========================= */
@media(max-width:480px){
.petal-blur{
opacity:.28;
filter:
blur(2.5px)
drop-shadow(
0 4px 8px
rgba(235,90,130,.10)
);
}
.b3,
.b7{
width:42px;
height:56px;
}
}