/**
* FLORAL FLOAT TEST
*/
.canvas-couple-section{
position:relative;
overflow:hidden;
}
.canvas-couple-section::before,
.canvas-couple-section::after{
position:absolute;
z-index:999;
pointer-events:none;
}
/* BUNGA 1 */
.canvas-couple-section::before{
content:'🌸';
font-size:70px;
top:10%;
left:-100px;
animation:
flowerFloatA
12s linear infinite;
}
/* BUNGA 2 */
.canvas-couple-section::after{
content:'🌺';
font-size:100px;
bottom:15%;
right:-100px;
animation:
flowerFloatB
15s linear infinite;
}
@keyframes flowerFloatA{
0%{
left:-100px;
transform:
rotate(0deg);
}
50%{
transform:
rotate(180deg)
translateY(-20px);
}
100%{
left:110%;
transform:
rotate(360deg);
}
}
@keyframes flowerFloatB{
0%{
right:-100px;
transform:
rotate(0deg);
}
50%{
transform:
rotate(-180deg)
translateY(30px);
}
100%{
right:110%;
transform:
rotate(-360deg);
}
}
/**
.canvas-couple-section{
position:relative;
overflow:hidden;
}
/* KIRI ATAS */
.canvas-couple-section::before{
content:’🌸’;
position:absolute;
top:20px;
left:20px;
font-size:90px;
z-index:5;
pointer-events:none;
animation:
flowerRotateA 12s linear infinite;
}
/* KANAN ATAS */
.canvas-couple-section::after{
content:’🌺’;
position:absolute;
top:60px;
right:40px;
font-size:55px;
z-index:5;
pointer-events:none;
animation:
flowerRotateB 8s linear infinite;
}
/* BUNGA EXTRA */
.canvas-couple-wrap{
position:relative;
}
.canvas-couple-wrap::before{
content:’🌼’;
position:absolute;
bottom:40px;
left:10px;
font-size:70px;
z-index:5;
pointer-events:none;
animation:
flowerRotateC 14s linear infinite;
}
.canvas-couple-wrap::after{
content:’🌷’;
position:absolute;
bottom:80px;
right:15px;
font-size:110px;
z-index:5;
pointer-events:none;
animation:
flowerRotateD 18s linear infinite;
}
/**
@keyframes flowerRotateA{
0%{
transform:
rotate(0deg)
translateY(0);
}
50%{
transform:
rotate(180deg)
translateY(-12px);
}
100%{
transform:
rotate(360deg)
translateY(0);
}
}
@keyframes flowerRotateB{
0%{
transform:
rotate(0deg)
translateY(0);
}
50%{
transform:
rotate(-180deg)
translateY(10px);
}
100%{
transform:
rotate(-360deg)
translateY(0);
}
}
@keyframes flowerRotateC{
0%{
transform:
rotate(0deg);
}
100%{
transform:
rotate(360deg);
}
}
@keyframes flowerRotateD{
0%{
transform:
rotate(0deg);
}
100%{
transform:
rotate(-360deg);
}
}
#####
.canvas-couple-section{
position:relative;
overflow:hidden;
}
.canvas-couple-section::before{
content:’🌸’;
position:absolute;
top:0px;
left:20px;
font-size:80px;
z-index:999;
animation:
cornerSpinA
10s linear infinite;
}
.canvas-couple-section::after{
content:’🌺’;
position:absolute;
bottom:20px;
right:20px;
font-size:100px;
z-index:999;
animation:
cornerSpinB
15s linear infinite;
}
@keyframes cornerSpinA{
from{
transform:
rotate(0deg);
}
to{
transform:
rotate(360deg);
}
}
@keyframes cornerSpinB{
from{
transform:
rotate(360deg);
}
to{
transform:
rotate(0deg);
}
}
####
/**
.canvas-couple-section{
position:relative;
overflow:hidden;
}
/* PARTICLE 1 */
.canvas-couple-section::before{
content:”;
position:absolute;
top:5%;
left:-10%;
width:120px;
height:120px;
background-image:url(‘https://bestday.my.id/wp-content/uploads/2026/05/dark.webp’);
background-size:contain;
background-repeat:no-repeat;
opacity:.8;
pointer-events:none;
animation:
particleA 18s linear infinite;
}
/* PARTICLE 2 */
.canvas-couple-section::after{
content:”;
position:absolute;
bottom:10%;
right:-10%;
width:80px;
height:80px;
background-image:url(‘https://bestday.my.id/wp-content/uploads/2026/05/dark.webp’);
background-size:contain;
background-repeat:no-repeat;
opacity:.6;
pointer-events:none;
animation:
particleB 14s linear infinite;
}
/* EXTRA */
.canvas-couple-wrap::before{
content:”;
position:absolute;
top:50%;
left:-5%;
width:60px;
height:60px;
background-image:url(‘https://bestday.my.id/wp-content/uploads/2026/05/dark.webp’);
background-size:contain;
background-repeat:no-repeat;
opacity:.4;
pointer-events:none;
animation:
particleC 12s linear infinite;
}
.canvas-couple-wrap::after{
content:”;
position:absolute;
top:20%;
right:-5%;
width:150px;
height:150px;
background-image:url(‘https://bestday.my.id/wp-content/uploads/2026/05/dark.webp’);
background-size:contain;
background-repeat:no-repeat;
opacity:.5;
pointer-events:none;
animation:
particleD 20s linear infinite;
}
@keyframes particleA{
0%{
transform:
translateX(0)
rotate(0deg);
}
100%{
transform:
translateX(120vw)
rotate(360deg);
}
}
@keyframes particleB{
0%{
transform:
translateX(0)
rotate(0deg);
}
100%{
transform:
translateX(-120vw)
rotate(-360deg);
}
}
@keyframes particleC{
0%{
transform:
translateY(0)
rotate(0deg);
}
100%{
transform:
translateY(-200px)
rotate(360deg);
}
}
@keyframes particleD{
0%{
transform:
translateY(0)
rotate(0deg);
}
100%{
transform:
translateY(150px)
rotate(-360deg);
}
}
/**
.canvas-couple-section{
position:relative;
overflow:hidden;
}
/* PETAL 1 */
.canvas-couple-section::before{
content:”;
position:absolute;
top:-150px;
left:10%;
width:80px;
height:80px;
background-image:url(‘https://bestday.my.id/wp-content/uploads/2026/05/dark.webp’);
background-size:contain;
background-repeat:no-repeat;
pointer-events:none;
animation:
petalA 12s linear infinite;
}
/* PETAL 2 */
.canvas-couple-section::after{
content:”;
position:absolute;
top:-120px;
left:40%;
width:50px;
height:50px;
background-image:url(‘https://bestday.my.id/wp-content/uploads/2026/05/dark.webp’);
background-size:contain;
background-repeat:no-repeat;
pointer-events:none;
animation:
petalB 16s linear infinite;
}
/* PETAL 3 */
.canvas-couple-wrap::before{
content:”;
position:absolute;
top:-100px;
left:70%;
width:100px;
height:100px;
background-image:url(‘https://bestday.my.id/wp-content/uploads/2026/05/dark.webp’);
background-size:contain;
background-repeat:no-repeat;
pointer-events:none;
animation:
petalC 18s linear infinite;
}
/* PETAL 4 */
.canvas-couple-wrap::after{
content:”;
position:absolute;
top:-130px;
left:85%;
width:60px;
height:60px;
background-image:url(‘https://bestday.my.id/wp-content/uploads/2026/05/dark.webp’);
background-size:contain;
background-repeat:no-repeat;
pointer-events:none;
animation:
petalD 14s linear infinite;
}
@keyframes petalA{
0%{
top:-150px;
left:10%;
transform:
rotate(0deg);
}
25%{
left:15%;
transform:
rotate(90deg);
}
50%{
left:8%;
transform:
rotate(180deg);
}
75%{
left:18%;
transform:
rotate(270deg);
}
100%{
top:120%;
left:12%;
transform:
rotate(360deg);
}
}
@keyframes petalB{
0%{
top:-120px;
left:40%;
transform:
rotate(0deg);
}
50%{
left:32%;
transform:
rotate(-180deg);
}
100%{
top:120%;
left:45%;
transform:
rotate(-360deg);
}
}
@keyframes petalC{
0%{
top:-100px;
left:70%;
transform:
rotate(0deg);
}
25%{
left:76%;
}
50%{
left:65%;
}
75%{
left:80%;
}
100%{
top:120%;
left:70%;
transform:
rotate(720deg);
}
}
@keyframes petalD{
0%{
top:-130px;
left:85%;
transform:
rotate(0deg);
}
50%{
left:75%;
transform:
rotate(-360deg);
}
100%{
top:120%;
left:88%;
transform:
rotate(-720deg);
}
}