纯css实现回旋动画

╰半橙微兮° 2022-08-25 14:49 183阅读 0赞

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

![SouthEast][]

[在线研究][Link 1]点这里，[下载收藏][Link 2]点这里。

重点关注

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

2.sass的使用

3.compass类库的使用

haml文件

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

编译成html之后

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))

![SouthEast 1][]

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

![SouthEast 2][]

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

![SouthEast 3][]  
嗯，完工。

\---------------------------------------------------------------

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

[SouthEast]: /images/20220824/8d575ee7245a4055b60d64c77060eeb3.png
[Link 1]: http://codepen.io/whqet/pen/nabpC
[Link 2]: http://codepen.io/whqet/share/zip/nabpC
[SouthEast 1]: /images/20220824/cc619974c2f243ba92753b4ce69a384f.png
[SouthEast 2]: /images/20220824/34cc52ff3be94129ace7d41156ae6596.png
[SouthEast 3]: /images/20220824/993e1fb161f349308fcad628a860cb23.png
[whqet]: http://blog.csdn.net/whqet