KingのNote

旋转轮播图

3/19/2024 样式效果

# 效果展示

# 代码

效果实现难点为用 stylus 编写动态样式，包括：变量、计算和循环

# html

<div class="wrapper">
    <div class="container">
        <div class="inner">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
        </div>
    </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

# css（stylus）

.wrapper
  padding 50px 0
  height 300px
  background-color #f6f6f6

// 窗口大小
$boxSize = 200px
// 盒子数量
$n = 6
$activeTime = 1
$pauseTime = 2
$totalTime = ($activeTime + $pauseTime) * $n

// 盒子窗口半径
$r = ($boxSize / 2)
$deg = (360deg / $n)
$R = $r / sin($deg / 2)

.container
  display flex
  border-radius 50%
  height $boxSize
  width $boxSize
  margin auto
  overflow hidden

  .inner
    flex-shrink 0
    border-radius 50%
    width 2 * $R
    height 2 * $R
    //background-color green
    margin-left $r - $R
    margin-top $r
    position relative
    animation: circleRot 9s infinite;

    .box
      width $boxSize
      height $boxSize
      border-radius 50%
      background-color #795da3
      position absolute
      left 50%
      margin-left - $r
      margin-top - $r
      transform-origin center $r + $R

      for i in (1..$n)
        &:nth-child({i})
          transform rotate($deg * i)
          background url("https://picsum.photos/200/200?id=" + i)


@keyframes circleRot
  for i in (1..$n)
    $percent1 = (($activeTime + $pauseTime) * ( i - 1 ) + $activeTime) / $totalTime * 100%
    $percent2 = ($activeTime + $pauseTime) * i / $totalTime * 100%

    {$percent1}
      transform rotate($deg * i)
    {$percent2}
      transform rotate($deg * i)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

文字内容随背景变化