Remove petal and ladybug functionality from spring animation
This commit is contained in:
@@ -10,39 +10,6 @@
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* Petals */
|
||||
.spring-petal {
|
||||
position: fixed;
|
||||
top: -20px;
|
||||
z-index: 1005;
|
||||
width: 15px;
|
||||
height: 10px;
|
||||
background-color: #ffc0cb;
|
||||
border-radius: 15px 0px 15px 0px;
|
||||
|
||||
will-change: transform, top;
|
||||
animation-name: spring-fall, spring-sway;
|
||||
animation-timing-function: linear, ease-in-out;
|
||||
animation-iteration-count: infinite, infinite;
|
||||
animation-duration: 10s, 3s;
|
||||
}
|
||||
|
||||
.spring-petal.lighter {
|
||||
background-color: #ffd1dc;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.spring-petal.darker {
|
||||
background-color: #ffb7c5;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.spring-petal.type2 {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 10px 0px 10px 5px;
|
||||
}
|
||||
|
||||
/* Pollen */
|
||||
.spring-pollen {
|
||||
position: fixed;
|
||||
@@ -99,54 +66,7 @@
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/* Ladybugs */
|
||||
.spring-ladybug {
|
||||
position: absolute;
|
||||
width: 6px;
|
||||
height: 4px;
|
||||
background-color: #e74c3c; /* Red */
|
||||
border-radius: 3px 3px 0 0;
|
||||
z-index: 1003;
|
||||
|
||||
will-change: left, transform;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.spring-ladybug.right {
|
||||
animation-name: spring-bug-crawl-right;
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.spring-ladybug.left {
|
||||
animation-name: spring-bug-crawl-left;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
.spring-ladybug::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: 1px;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background-color: #000;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@keyframes spring-fall {
|
||||
0% { top: -10%; }
|
||||
100% { top: 100%; }
|
||||
}
|
||||
|
||||
@keyframes spring-sway {
|
||||
0%, 100% {
|
||||
transform: translateX(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateX(30px) rotate(45deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spring-float {
|
||||
0% { transform: translateX(0) translateY(0); }
|
||||
@@ -168,12 +88,4 @@
|
||||
100% { transform: rotate(0deg); }
|
||||
}
|
||||
|
||||
@keyframes spring-bug-crawl-right {
|
||||
0% { left: -5%; }
|
||||
100% { left: 105%; }
|
||||
}
|
||||
|
||||
@keyframes spring-bug-crawl-left {
|
||||
0% { left: 105%; }
|
||||
100% { left: -5%; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user