Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
//定义大圆的直径
$large-r: 460px !default;
//定义小圆的直径
$small-r: 30px !default;
//动画时间
$time: 3s;
$delay: $time/8;
//定义角度
$angle: 360deg/16;
*{
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
}
label {
cursor: pointer;
margin-right: 10px;
}
input, label {
vertical-align: middle;
font-size: 22px;
}
.main {
text-align: center;
}
.circle {
margin: 20px auto;
position: relative;
background: black;
border-radius: 50%;
height: $large-r;
width: $large-r;
& .line {
height: 100%;
position: absolute;
width: 1px;
left: 50%;
background-color: transparent;
transition: background-color .3s;
&:before {
content: '';
position: absolute;
width: $small-r;
height: $small-r;
line-height: $small-r;
left: -$small-r/2;
text-align: center;
background: #2695E3;
color: #fff;
border-radius: 50%;
}
}
}
.circle .line:before {
-webkit-animation: move $time ease-in-out infinite alternate;
}
@for $i from 1 through 8 {
.circle .line:nth-child(#{$i}){
transform: rotate($angle * $i);
&:before{
-webkit-animation-delay: ($i - 1) * $delay;
transform: rotate(-$angle * $i);
}
}
}
@-webkit-keyframes move {
from {
top: 0;
}
to {
top: $large-r - $small-r;
}
}
#track:checked ~ .circle .line {
background-color: #81E586;
}
#play:checked ~ .circle .line:before {
-webkit-animation-play-state: paused;
}
/* 显示编号 */
#number:checked ~ .circle .line:before {
content: attr(data-id);
}
/* 暂停 */
#play ~ label:after {
font-size: 50px;
display: inline-block;
vertical-align: middle;
content: "🙈";
}
/* 播放 */
#play:checked ~ label:after {
content: "🙉么";
}
// $pi: 3.141592653589793 !default;
// @for $i from 1 through 4 {
// .main .line:nth-child(#{$i}):before{
// top: $r - (cos((5 - $i )*$pi/8)*$r);
// // transform: translate(-50%, $r - (cos((5 - $i )*$pi/8)*$r));
// }
// }
// @for $i from 5 through 8 {
// .main .line:nth-child(#{$i}):before{
// top: $r - (cos((5 - $i )*$pi/8)*$r);
// // transform: translate(-50%, $r - (cos((5 - $i )*$pi/8)*$r));
// }
// }
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
}
label {
cursor: pointer;
margin-right: 10px;
}
input, label {
vertical-align: middle;
font-size: 22px;
}
.main {
text-align: center;
}
.circle {
margin: 20px auto;
position: relative;
background: black;
border-radius: 50%;
height: 460px;
width: 460px;
}
.circle .line {
height: 100%;
position: absolute;
width: 1px;
left: 50%;
background-color: transparent;
transition: background-color .3s;
}
.circle .line:before {
content: '';
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
left: -15px;
text-align: center;
background: #2695E3;
color: #fff;
border-radius: 50%;
}
.circle .line:before {
-webkit-animation: move 3s ease-in-out infinite alternate;
}
.circle .line:nth-child(1) {
transform: rotate(22.5deg);
}
.circle .line:nth-child(1):before {
-webkit-animation-delay: 0s;
transform: rotate(-22.5deg);
}
.circle .line:nth-child(2) {
transform: rotate(45deg);
}
.circle .line:nth-child(2):before {
-webkit-animation-delay: 0.375s;
transform: rotate(-45deg);
}
.circle .line:nth-child(3) {
transform: rotate(67.5deg);
}
.circle .line:nth-child(3):before {
-webkit-animation-delay: 0.75s;
transform: rotate(-67.5deg);
}
.circle .line:nth-child(4) {
transform: rotate(90deg);
}
.circle .line:nth-child(4):before {
-webkit-animation-delay: 1.125s;
transform: rotate(-90deg);
}
.circle .line:nth-child(5) {
transform: rotate(112.5deg);
}
.circle .line:nth-child(5):before {
-webkit-animation-delay: 1.5s;
transform: rotate(-112.5deg);
}
.circle .line:nth-child(6) {
transform: rotate(135deg);
}
.circle .line:nth-child(6):before {
-webkit-animation-delay: 1.875s;
transform: rotate(-135deg);
}
.circle .line:nth-child(7) {
transform: rotate(157.5deg);
}
.circle .line:nth-child(7):before {
-webkit-animation-delay: 2.25s;
transform: rotate(-157.5deg);
}
.circle .line:nth-child(8) {
transform: rotate(180deg);
}
.circle .line:nth-child(8):before {
-webkit-animation-delay: 2.625s;
transform: rotate(-180deg);
}
@-webkit-keyframes move {
from {
top: 0;
}
to {
top: 430px;
}
}
#track:checked ~ .circle .line {
background-color: #81E586;
}
#play:checked ~ .circle .line:before {
-webkit-animation-play-state: paused;
}
/* 显示编号 */
#number:checked ~ .circle .line:before {
content: attr(data-id);
}
/* 暂停 */
#play ~ label:after {
font-size: 50px;
display: inline-block;
vertical-align: middle;
content: "🙈";
}
/* 播放 */
#play:checked ~ label:after {
content: "🙉么";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.