CSS
.perspective {
transform: rotateX(21deg);
max-width: 640px;
max-height: 480px;
min-height: 380px;
background: slategray;
position: relative;
z-index: 2;
color: rgba(50, 50, 50, 1);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column-reverse;
}
.wrapper {
width: 320px;
height: 220px;
background: linear-gradient(0deg, rgba(111, 72, 72, 1) 0%, rgba(135, 95, 95, 1) 50%, rgba(111, 72, 72, 1) 100%);
display: flex;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: inset 13px 13px 13px rgba(0, 0, 0, 0.33);
border-radius: 3%;
outline: 1px solid transparent;
transform-style: preserve-3d;
transition: transform 100ms ease-out;
transform-origin: bottom;
transform: rotateX(8deg) scale(.98);
}
.wrapper:after {
content: '';
width: 100%;
height: 40%;
position: absolute;
top: 26%;
left: 0;
z-index: -1;
background: linear-gradient(to right, rgba(229, 168, 158, 0) 0%, rgba(229, 168, 158, .89) 50%, rgba(229, 168, 158, 0.21) 100%);
opacity: 0.13;
animation: animHighlight 400ms ease 1 alternate;
}
.wrapper:after {
right: -13px;
}
.figure:before,
.figure:after {
margin: 0;
padding: 0;
content: '';
}
.header {
display: flex;
align-items: center;
flex-direction: column;
}
.header h2 {
transform-style: preserve-3d;
display: flex;
animation: animFloat 5s linear infinite;
margin-bottom: 35px;
color: lightgray;
font-size: 4.5rem;
}
.slot {
width: calc(320px /3);
height: auto;
margin: 0;
margin-top: -700px;
position: relative;
}
.slot .group {
animation: animSpin 600ms steps(5) infinite running;
transform-style: flat;
}
.slot .group:before,
.slot .group:after {
display: block;
outline: 1px solid transparent;
}
.slot:first-of-type>.group:before,
.slot:last-of-type>.group:before {
width: 8px;
height: 101%;
left: -1px;
position: absolute;
background: linear-gradient(0deg, rgba(135, 95, 95, 1) 0%, rgba(111, 72, 72, 1) 50%, rgba(135, 95, 95, 1) 100%);
z-index: 2;
}
.slot:last-of-type>.group:before {
left: auto;
right: -1px;
background: linear-gradient(0deg, rgba(135, 95, 95, 1) 0%, rgba(111, 72, 72, 1) 50%, rgba(135, 95, 95, 1) 100%);
}
.slot:nth-of-type(2)>.group {
animation-delay: 100ms;
animation-duration: 700ms;
}
.slot:nth-of-type(3)>.group {
animation-delay: 200ms;
animation-duration: 800ms;
}
.figure {
height: calc(320px /3);
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.figure:nth-of-type(1) {
border-radius: 3%;
}
.figure:after,
.figure:before {
border-radius: 3%;
width: calc(calc(320px /3) * 0.5);
height: calc(calc(320px /3) * 0.5);
position: absolute;
box-shadow: inset 0px 5px 8px 0px rgba(160, 76, 48, 0.13);
}
.figure:nth-of-type(1):before,
.figure:nth-of-type(1):after {
transform: translateX(-30px) translateY(-30px);
}
.figure:nth-of-type(1):before {
box-shadow: 20px 10px 0 #ffffff, 30px 10px 0 #ffffff, 40px 10px 0 #ffffff, 50px 10px 0 #ffffff, 50px 20px 0 #ffffff, 40px 30px 0 #ffffff, 30px 40px 0 #ffffff, 30px 50px 0 #ffffff;
height: 10px;
width: 10px;
}
.figure:nth-of-type(1):after {
box-shadow: 20px 10px 0 #e7a5a8, 30px 10px 0 #eba3b3, 40px 10px 0 #f0a1c2, 50px 10px 0 #eda2ba, 50px 20px 0 #eba3b3, 40px 30px 0 #e7a5a8, 30px 40px 0 #e2a899, 30px 50px 0 #d9a084;
height: 10px;
width: 10px;
}
.figure:nth-of-type(2):before,
.figure:nth-of-type(2):after {
border-radius: 50%;
}
.figure:nth-of-type(2):before {
background: linear-gradient(54deg, rgba(229, 168, 158, 1) 0%, rgba(215, 160, 124, 1) 100%);
}
.figure:nth-of-type(2):after {
transform: scale(.67);
background: linear-gradient(54deg, rgba(219, 125, 155, 1) 0%, rgba(207, 122, 117, 1) 100%);
}
.figure:nth-of-type(3):before {
border-radius: 8px;
background: linear-gradient(54deg, rgba(229, 168, 158, 1) 0%, rgba(215, 160, 124, 1) 100%);
}
.figure:nth-of-type(3):after {
border-radius: 8px;
background: linear-gradient(54deg, rgba(219, 125, 155, 1) 0%, rgba(207, 122, 117, 1) 100%);
transform: scale(.67);
}
.figure:nth-of-type(4):before {
transform-origin: center;
background: linear-gradient(54deg, rgba(229, 168, 158, 1) 0%, rgba(215, 160, 124, 1) 100%);
}
.figure:nth-of-type(4):after {
transform: rotateZ(-45deg);
box-sizing: border-box;
background: linear-gradient(54deg, rgba(246, 151, 162, 1) 0%, rgba(228, 156, 167, 1) 100%);
border: 8px solid;
border-color: #e6a2ad #db919d #dda191 #d7a07c;
box-shadow: none;
}
.figure:nth-of-type(5):before {
border-radius: 8px;
background: linear-gradient(54deg, rgba(229, 168, 158, 1) 0%, rgba(215, 160, 124, 1) 100%);
transform: rotateZ(45deg);
}
.figure:nth-of-type(5):after {
border-radius: 8px;
background: linear-gradient(54deg, rgba(219, 125, 155, 1) 0%, rgba(207, 122, 117, 1) 100%);
transform: scale(.67) rotateZ(45deg);
}
.toggler {
margin: 20px;
position: relative;
background: white;
width: 150px;
height: 40px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition-duration: .5s;
}
.toggler summary:before {
content: 'Start!';
}
.toggler[open] summary:before {
content: 'Stop!';
}
.toggler summary::marker {
content: '';
}
.toggler summary {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
height: 100%;
}
.btn {
width: 120px;
height: 50px;
position: relative;
color: #fff;
cursor: pointer;
border-radius: 5px 5px 13px 5px;
background: linear-gradient(54deg, rgba(246, 151, 162, 1) 0%, rgba(228, 156, 167, 1) 100%);
animation: animBounce 189ms linear forwards infinite reverse running;
margin-top: 34px;
backface-visibility: hidden;
outline: 1px solid transparent;
-webkit-tap-highlight-color: transparent;
}
.btn:before,
.btn:after {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
border-radius: 5px 5px 13px 5px;
}
.btn:before {
border-radius: 0;
box-shadow: 30px 20px 0 #ffffff, 40px 20px 0 #ffffff, 50px 20px 0 #ffffff, 80px 20px 0 #ffffff, 90px 20px 0 #ffffff, 100px 20px 0 #ffffff, 140px 20px 0 #ffffff, 170px 20px 0 #ffffff, 210px 20px 0 #ffffff, 20px 30px 0 #ffffff, 80px 30px 0 #ffffff, 110px 30px 0 #ffffff, 140px 30px 0 #ffffff, 170px 30px 0 #ffffff, 180px 30px 0 #ffffff, 210px 30px 0 #ffffff, 30px 40px 0 #ffffff, 40px 40px 0 #ffffff, 80px 40px 0 #ffffff, 90px 40px 0 #ffffff, 100px 40px 0 #ffffff, 140px 40px 0 #ffffff, 170px 40px 0 #ffffff, 190px 40px 0 #ffffff, 210px 40px 0 #ffffff, 50px 50px 0 #ffffff, 80px 50px 0 #ffffff, 140px 50px 0 #ffffff, 170px 50px 0 #ffffff, 200px 50px 0 #ffffff, 210px 50px 0 #ffffff, 20px 60px 0 #ffffff, 30px 60px 0 #ffffff, 40px 60px 0 #ffffff, 80px 60px 0 #ffffff, 140px 60px 0 #ffffff, 170px 60px 0 #ffffff, 210px 60px 0 #ffffff;
height: 10px;
width: 10px;
transform: translateX(11px) scale(.375);
opacity: 1;
}
.btn:after {
border-radius: 0;
box-shadow: 30px 20px 0 #ffffff, 40px 20px 0 #ffffff, 50px 20px 0 #ffffff, 80px 20px 0 #ffffff, 90px 20px 0 #ffffff, 100px 20px 0 #ffffff, 140px 20px 0 #ffffff, 150px 20px 0 #ffffff, 190px 20px 0 #ffffff, 200px 20px 0 #ffffff, 210px 20px 0 #ffffff, 20px 30px 0 #ffffff, 90px 30px 0 #ffffff, 130px 30px 0 #ffffff, 160px 30px 0 #ffffff, 190px 30px 0 #ffffff, 220px 30px 0 #ffffff, 30px 40px 0 #ffffff, 40px 40px 0 #ffffff, 90px 40px 0 #ffffff, 130px 40px 0 #ffffff, 160px 40px 0 #ffffff, 190px 40px 0 #ffffff, 200px 40px 0 #ffffff, 210px 40px 0 #ffffff, 50px 50px 0 #ffffff, 90px 50px 0 #ffffff, 130px 50px 0 #ffffff, 160px 50px 0 #ffffff, 190px 50px 0 #ffffff, 20px 60px 0 #ffffff, 30px 60px 0 #ffffff, 40px 60px 0 #ffffff, 90px 60px 0 #ffffff, 140px 60px 0 #ffffff, 150px 60px 0 #ffffff, 190px 60px 0 #ffffff;
height: 10px;
width: 10px;
opacity: 0;
transform: translateX(11px) scale(.375);
}
#btn-spin:not([open])~.wrapper>.slot>.group {
animation-play-state: paused;
}
#btn-spin:not([open])+.btn {
animation-play-state: paused;
}
#btn-spin[open]+.btn:before {
opacity: 0;
animation: btnSpinHide 300ms ease;
}
#btn-spin[open]+.btn:after {
opacity: 1;
animation: btnStopShow 300ms ease;
}
#btn-spin:not([open])~.wrapper {
transform: none;
}
#btn-spin[open]~.wrapper:after {
animation-name: none;
}
@keyframes animSpin {
0% {
transform: translateY(0%);
}
100% {
transform: translateY(100%);
}
}
@keyframes animBounce {
0% {
transform: rotateX(21deg);
}
50% {
transform: translateY(3px) scaleX(.98) scaleY(1.02) rotateX(25deg);
}
100% {
transform: translateY(-1px) rotateX(21deg);
}
}
@keyframes animFloat {
0% {
transform: translateY(0);
}
25% {
transform: translateY(5px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(-5px);
}
100% {
transform: translateY(0);
}
}
@keyframes animPulse {
0%,
25% {
opacity: 0;
}
50% {
opacity: .89;
}
100% {
opacity: 0;
}
}
@keyframes animHighlight {
0% {
opacity: 0.13;
}
55% {
opacity: .34;
}
100% {
opacity: 0.13;
}
}
@media screen and (max-height: 440px) {
.perspective {
transform: scale(.67) rotateX(21deg);
}
}
Public Last updated: 2025-09-03 04:42:05 AM