Note for everything
继续Codepen上的Sass魔法门。
这位童鞋做了两个loading动画的样式
@keyframes loading { 0% { transform: translate(-99px, -50%); } 100% { transform: translate(71px, -50%); }}
//This is not the best example of a mixin - it is just something to help modify examples on the fly. Sorry! @mixin loading($name, $big_radius:50,$little_radius:10,$big_stroke:10,$little_stroke:5,$speed:4s,$res:40) { &:before{ content:''; position: absolute; top: 50%; left: 50%; width: ($big_radius*2) +px; height: ($big_radius*2) +px; z-index: 999; border-radius: 50%; border: solid $big_stroke+px rgba(10,120,255,.5); transform: translate( 0- $big_radius + px, 0- $big_radius +px); } &:after{ content:''; position: absolute; top: 50%; left: 50%; width: $little_radius+px; height: $little_radius+px; z-index: 999; border-radius: 50%; border: solid $little_stroke+px rgba(255,255,255,.8); animation-name: #{$name} ; animation-duration: $speed; animation-iteration-count: infinite; } // This generates a lot of keyframes, but smaler than svg or img, can tune with $res @keyframes #{$name} { @for $i from 0 through $res { $x: floor( ($big_radius - ($big_stroke/2)) * cos( 2 * pi() * ($i / $res)) - ($little_radius/2) ); $y: floor( ($big_radius - ($big_stroke/2)) * sin( 2 * pi() * ($i / $res)) - ($little_radius/2) ); #{($i/$res)*100}% { transform: translate($x + px,$y + px); } } } }
.example-1{ height: 200px; margin: 1em 0; background: rgba(100,230,230,0.5); border: solid 3px rgb(100,230,230); position: relative; @include loading('example-1',80,20,20,10);}.example-2{ margin: 1em 0; padding: 0 1em; border: solid 3px rgb(100,230,230);}#more{ position: relative; display: block; margin: 1em 0; padding: 1em; height: 65px; text-align: center; border: dashed 3px rgb(100,230,230);}#more:target{ position: relative; background: rgba(100,230,230,0.5); border: solid 3px rgb(100,230,230); @include loading('example-2',20,10,5,5,1s);}#more:target a{ display: none;}.example-3{ position: relative; margin: 1em 0; cursor:pointer;}.example-3:hover{ @include loading('example-3',30,20,8,5,2s);}.example-4{ position: relative; display: block; margin: 1em 0; padding: 1em; height: 65px; text-align: center; border: dashed 3px rgb(100,230,230);}#page:target{ position:absolute; position:fixed; top:0; left:0; width:100%; height:100%; z-index: 99999; background:rgba(255,255,255,0.9); @include loading('example-4',60,20,15,8,3s);}