پیشنمایش زنده
کد HTML
<div class="uverse-widget-container">
<div id="wrapper" class="twist">
<div id="button">
<div id="button_inner" class="spin">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div id="shadow"></div>
</div>
</div>
کد CSS
.uverse-widget-container {
background-color: #5a3410;
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
width: 100%;
padding: 40px 20px;
box-sizing: border-box;
overflow: hidden;
border-radius: 12px;
}
#wrapper {
width: 160px;
}
#button {
display: block;
width: 150px;
height: 150px;
background: #e9946d;
border-radius: 75px;
-moz-border-radius: 75px;
box-shadow: -7px 0 0 #b25b25;
-moz-box-shadow: -7px 0 0 0 #b25b25;
-webkit-box-shadow: -7px 0 0 0 #b25b25;
cursor: pointer;
transition: all 0.15s ease;
}
#button_inner {
display: block;
width: 100px;
height: 100px;
background: #e9946d;
border-radius: 50px;
-moz-border-radius: 50px;
box-shadow: inset -7px 0 0 #b25b25;
-moz-box-shadow: inset -7px 0 0 #b25b25;
-webkit-box-shadow: inset -7px 0 0 #b25b25;
position: relative;
left: 25px;
top: 25px;
border: 2px solid #b25b25;
}
#button_inner ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
#button_inner ul li {
display: inline-block;
width: 18px;
height: 18px;
margin: 4px;
background: #5a3410;
border-radius: 9px;
-moz-border-radius: 9px;
box-shadow: inset -3px 0 0 #b25b25;
-moz-box-shadow: inset -3px 0 0 #b25b25;
-webkit-box-shadow: inset -3px 0 0 #b25b25;
position: relative;
top: 22px;
left: 20px;
}
#shadow {
position: relative;
height: 12px;
width: 140px;
top: 30px;
left: 0px;
background-image: -moz-radial-gradient(
50% 50%,
ellipse closest-corner,
rgba(41, 24, 8, 0.7),
rgba(91, 53, 17, 0.7) 74%
);
background-image: -webkit-radial-gradient(
50% 50%,
ellipse closest-corner,
rgba(41, 24, 8, 0.7),
rgba(91, 53, 17, 0.7) 74%
);
background-image: -o-radial-gradient(
50% 50%,
ellipse closest-corner,
rgba(41, 24, 8, 0.7),
rgba(91, 53, 17, 0.7) 74%
);
background-image: -ms-radial-gradient(
50% 50%,
ellipse closest-corner,
rgba(41, 24, 8, 0.7),
rgba(91, 53, 17, 0.7) 74%
);
background-image: radial-gradient(
50% 50%,
ellipse closest-corner,
rgba(41, 24, 8, 0.7),
rgba(91, 53, 17, 0.7) 74%
);
transition: all 0.15s ease;
}
#button:active {
box-shadow: -2px 0 0 #b25b25;
-moz-box-shadow: -2px 0 0 0 #b25b25;
-webkit-box-shadow: -2px 0 0 0 #b25b25;
transform: translateX(-5px);
}
#wrapper:active #shadow {
transform: scale(0.95) translateX(-3px);
opacity: 0.8;
}
@keyframes spin {
100% {
transform: rotate(360deg);
}
}
.spin {
animation: spin 8s linear infinite;
}
@-webkit-keyframes twist {
from {
-webkit-transform: scaleX(1);
}
to {
-webkit-transform: scaleX(0.9);
}
}
@keyframes twist {
from {
transform: scaleX(1);
}
to {
transform: scaleX(0.9);
}
}
.twist {
-webkit-animation: twist 3s ease-in-out infinite;
-webkit-animation-direction: alternate;
animation: twist 3s ease-in-out infinite alternate;
}