「兔了个兔」创意投稿大赛——今日份海王兔已送达！！

我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

开篇

我™又来了啊。今日清闲，敲敲代码，突然灵光一下，正巧还痴迷于二刷Avatar2所打造的海底盛景，何不搞一个跟海洋有关的兔子玩玩，海王兔就这样出现了。 同时感谢阿里妈妈矢量库提供的插画。

首先放一下效果图吧，

海王兔主要参考DC海王驾驭海洋随波而行的场面，源码可调：

思路

再再 首先，造一个大的盒子outbox，接着往里面填充10个小盒子span。设置他们的布局，先让大盒子绕X轴旋转一定的角度，达到斜俯视的效果，更像3D.接着，将小盒子按顺序缩小，做成套环的样子。接着，把贴图兔子放到中间。最后，设置动画效果，让每个小的盒子和兔子，都按向上后下的动画动起来，再按顺序延迟一定的秒数。这样就成了联动效果。

首先，先构造一下HTML的主要样子

    <div class="img">
         <img src="./双生兔兔.png" style="width: 100%;height: 100%;" alt="">
    </div>
    <div class="outbox">
        <span style="--num:1"></span>
        <span style="--num:2"></span>
        <span style="--num:3"></span>
        <span style="--num:4"></span>
        <span style="--num:5"></span>
        <span style="--num:6"></span>
        <span style="--num:7"></span>
        <span style="--num:8"></span>
        <span style="--num:9"></span>
        <span style="--num:10"></span>
    </div>

如果不理解--num:1的话，下文会介绍。

接下来是css的绘制 主要是transform-style: preserve-3d;进行3D绘制，同时transform一下相关的位置。这里只放部分css代码。

.outbox{
    position: relative;
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    transform: perspective(600px) rotateX(50deg) translateZ(50px);
}
.img{
  position: absolute;
  top: 36%;
  left: 50%-50px;
  width: 100px;
  height: 100px;
  z-index: 999;
  animation: move1 1.5s ease-in-out infinite alternate;
}
.outbox span{
    position: absolute;
    top: calc(-8px * var(--num));
    left: calc(-8px * var(--num));
    bottom: calc(-8px * var(--num));
    right: calc(-8px * var(--num));
    border: 8px solid rgba(0, 162, 255,0.8);
    box-shadow: 0 6px 0 rgb(0, 162, 255),
    inset 0 6px 0 rgba(0, 162, 255,.9);
    border-radius: 50%;
    animation: move 1.5s ease-in-out infinite alternate;
    animation-delay: calc(var(--num) * 0.1s);
}
@keyframes move{
    0%,100%{
        transform: translateZ(0px);
    }
    50%{
       transform: translateZ(-100px);
    }
}
@keyframes move1{
    0%,100%{
        transform: translateY(0px);
    }
    50%{
       transform: translateY(100px);
    }
}

这里又出现了var(--num)这个，那么很显然是跟HTML里相关了。

这个函数必须要求定义一个“–XXX：XX”的属性，写在行内样式中。之后用var(–XXX)来使用，相当于JS中遍历这个数组一样。

[可参考：](CSS var() 函数 | 菜鸟教程 (runoob.com))

这就是我们的海王兔了。

我也同步在码上掘金上发布了这个代码，喜欢的话可以去看看。 兔了个兔（二） - 码上掘金 (juejin.cn)

最后，一个小请求，麻烦各位看官动动手指点个赞吧！！！