纯css实现回旋动画

css演武场今日继续，来看一个纯css实现的回旋动画。

在线研究点这里，下载收藏点这里。

重点关注

1. haml简化html，实现效果架构

2.sass的使用

3.compass类库的使用

haml文件

- @n = 25
.container
  - @n.times do
    .thing

编译成html之后

<div class='container'>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
  <div class='thing'></div>
</div>

sass使用了compass库来简化css3书写。

$n: 25
$s: 15em

html,
body
  height: 100%
body
  position: relative
  background: #272727
  overflow: hidden
.container,
.container *
  position: absolute
  top: 0
  right: 0
  bottom: 0
  left: 0
  margin: auto
  +transform-style(preserve-3d)
.container
  +animation(spin 10s linear infinite)
.thing
  width: $s
  height: $s
  +border-radius(50%)
  @for $i from 0 to $n
    $c: hsl($i * 360 / $n, 100%, 65%)
    &:nth-child(#{$i + 1})
      +box-shadow(inset 10px 0 0 1px rgba($c, 1))
      +transform(rotateZ($i * 360deg / $n)translateY($s / 3))
+keyframes(spin)
  100%
    +transform(rotateZ(360deg))

我们可以给不同的box-shadow值，获得不同的效果。

+box-shadow(inset 10px 0 20px 1px rgba($c, .9))

 +box-shadow(inset 20px 0 20px 1px rgba($c, .9))

+box-shadow(inset 20px 0 50px 1px rgba($c, .9))

嗯，完工。

---------------------------------------------------------------

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------