SCSS
body {
background: #33485F;
}
.container {
height: 280px;
width: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.popsicle {
height: 180px;
width: 120px;
border-radius: 55px 55px 10px 10px;
position: relative;
display: block;
margin: 0 auto;
overflow: hidden;
animation: float 2s ease-in infinite alternate;
&:before {
content: "";
height: 120%;
width: 140%;
position: absolute;
left: -20%;
top: -10%;
background-image: linear-gradient(0deg, #F63999 25%, #30dcf6 25%, #30dcf6 50%, #f2d200 50%, #f2d200 75%, #70ca5c 75%);
display: block;
transform: rotate(-20deg);
animation: magic 2.5s linear infinite;
}
@keyframes magic {
to {
background-position: 0 210px;
}
}
&:after {
content: '';
position: absolute;
left: 10px;
bottom: 10px;
width: 13px;
height: 120px;
border-radius: 50px;
background: rgba(255, 255, 255, 0.35);
}
}
.stick {
width: 38px;
height: 45px;
background: #E09C5F;
border-radius: 0 0 12px 12px;
display: block;
margin: 0 auto;
animation: float 2s ease-in infinite alternate;
&:after {
display: block;
content: '';
width: 100%;
height: 14px;
background: rgba(0, 0, 0, 0.40);
}
}
@keyframes float {
to {
transform: translateY(20px);
}
}
.shadow {
width: 124px;
height: 35px;
background: rgba(0, 0, 0, 0.2);
border-radius: 60px / 22px;
display: block;
margin: 0 auto;
transform: scaleY(0.7) translateY(30px);
animation: shad 2s ease-in infinite alternate;
}
@keyframes shad {
to {
transform: scaleX(0.9) scaleY(0.7) translateY(30px);
}
}
