168 lines
6.2 KiB
SCSS
168 lines
6.2 KiB
SCSS
#wheel-wrapper {
|
|
* {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.wheel {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 16rem;
|
|
height: 16rem;
|
|
border: 0.4rem solid #{$color-white};
|
|
border-radius: 50%;
|
|
margin: 0;
|
|
box-shadow: rgb(0 0 0 / 20%) 0 0 10px, rgb(0 0 0 / 5%) 0 3px 0;
|
|
transform: rotate(0deg);
|
|
|
|
&::before {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
left: 0;
|
|
width: calc(16rem - 0.2rem * 2);
|
|
height: calc(16rem - 0.2rem * 2);
|
|
border: 0.2rem solid rgb(0 0 0 / 10%);
|
|
border-radius: 50%;
|
|
content: "";
|
|
}
|
|
|
|
.wheel-inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
transition: all 6s cubic-bezier(0, 0.99, 0.44, 0.99);
|
|
}
|
|
|
|
.wheel-sec {
|
|
position: absolute;
|
|
top: -.1rem;
|
|
left: -.1rem;
|
|
width: 16rem;
|
|
height: calc(16rem / 2);
|
|
background-origin: border-box;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: auto;
|
|
opacity: 1;
|
|
transform-origin: calc(16rem / 2) calc(16rem / 2);
|
|
}
|
|
|
|
.wheel-spin {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 4.2rem;
|
|
height: 4.2rem;
|
|
border-radius: 50%;
|
|
margin: -34px 0 0 -34px;
|
|
background: #{$color-white};
|
|
box-shadow: rgb(0 0 0 / 10%) 0 3px 0;
|
|
cursor: pointer;
|
|
font-family: "Exo 2", sans-serif;
|
|
user-select: none;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
top: -12px;
|
|
left: 14px;
|
|
width: 0;
|
|
height: 0;
|
|
border-width: 0 20px 28px;
|
|
border-style: solid;
|
|
border-color: transparent transparent #{$color-white};
|
|
content: "";
|
|
}
|
|
|
|
&::after {
|
|
position: relative;
|
|
z-index: 100000;
|
|
display: block;
|
|
width: 4.2rem;
|
|
height: 4.2rem;
|
|
color: $color-dark;
|
|
content: "LANCER";
|
|
font-size: .7rem;
|
|
line-height: 4.2rem;
|
|
text-align: center;
|
|
text-shadow: 0 2px 0 #{$color-white}, 0 -1px 0 rgb(0 0 0 / 30%);
|
|
}
|
|
|
|
.wheel-spin-inner {
|
|
position: absolute;
|
|
z-index: 999;
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 54px;
|
|
height: 54px;
|
|
border-radius: 50%;
|
|
margin: -27px 0 0 -27px;
|
|
background: $color-white;
|
|
|
|
/* Old browsers */
|
|
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
|
background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* FF3.6+ */
|
|
background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, rgb(255 255 255 / 100%)), color-stop(100%, rgb(234 234 234 / 100%)) ); /* Chrome,Safari4+ */
|
|
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
|
background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* Chrome10+,Safari5.1+ */
|
|
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
|
background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* Opera 12+ */
|
|
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
|
background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* IE10+ */
|
|
background: radial-gradient(ellipse at center, rgb(255 255 255 / 100%) 0%, rgb(234 234 234 / 100%) 100% ); /* W3C */
|
|
box-shadow: rgb(255 255 255 / 100%) 0 -2px 0 inset, rgb(255 255 255 / 100%) 0 2px 0 inset, rgb(0 0 0 / 40%) 0 0 5px;
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
|
}
|
|
|
|
&:active,&.active {
|
|
&::after {
|
|
font-size: .8rem;
|
|
}
|
|
|
|
.wheel-spin-inner {
|
|
box-shadow: rgb(0 0 0 / 40%) 0 0 5px inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.wheel-shine {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 16rem;
|
|
height: 16rem; /* FF3.6+ */
|
|
background: -webkit-gradient(radial, center center, 0, center center, 100%, color-stop(0%, rgb(255 255 255 / 100%)), color-stop(1%, rgb(255 255 255 / 99%)), color-stop(9%, rgb(255 255 255 / 91%)), color-stop(100%, rgb(255 255 255 / 0%)) ); /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 12+ */
|
|
/* stylelint-disable-next-line declaration-property-value-no-unknown */
|
|
background: radial-gradient(center, ellipse cover, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 99%) 1%, rgb(255 255 255 / 91%) 9%, rgb(255 255 255 / 0%) 100% ); /* IE10+ */
|
|
background: radial-gradient(ellipse at center, rgb(255 255 255 / 100%) 0%, rgb(255 255 255 / 99%) 1%, rgb(255 255 255 / 91%) 9%, rgb(255 255 255 / 0%) 100% ); /* W3C */
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
|
|
/* ANIMATION */
|
|
@keyframes hh {
|
|
0%,
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(7deg);
|
|
}
|
|
}
|
|
|
|
@keyframes hh {
|
|
0%,
|
|
100% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
50% {
|
|
transform: rotate(7deg);
|
|
}
|
|
}
|
|
|
|
.spin { /* Chrome, Safari, Opera */
|
|
animation: hh 0.1s;
|
|
}
|
|
}
|