源代码下载

 

　　https://github.com/comehope/front-end-daily-challenges

 

　　代码解读

 

　　定义dom，容器中包含10个<div>子元素，每个<div>子元素内还有一个<span>子元素：

 

　　<figureclass="container">

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　<div><span></span></div>

 

　　</figure>

 

　　定义容器尺寸：

 

　　.container{

 

　　width:17em;

 

　　height:17em;

 

　　font-size:16px;

 

　　}

 

　　定义子元素的尺寸，和容器相同：

 

　　.container{

 

　　position:relative;

 

　　}

 

　　.containerdiv{

 

　　position:absolute;

 

　　width:inherit;

 

　　height:inherit;

 

　　}

 

　　在子元素的正中画一个黄色的小方块：

 

　　.containerdiv{

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　}

 

　　.containerspan{

 

　　position:absolute;

 

　　width:1em;

 

　　height:1em;

 

　　background-color:yellow;

 

　　}

 

　　增加让小方块左右移动的动画效果，动画时长还会在后面用到，所以定义成变量：

 

　　.containerspan{

 

　　--duration:2s;

 

　　animation:movevar(--duration)infinite;

 

　　}

 

　　@keyframesmove{

 

　　0%,100%{

 

　　left:calc(10%-0.5em);

 

　　}

 

　　50%{

 

　　left:calc(90%-0.5em);

 

　　}

 

　　}

 

　　用贝赛尔曲线调整动画的时间函数，使小方块看起来就像在左右两侧跳来跳去：

 

　　.containerspan{

 

　　animation:movevar(--duration)cubic-bezier(0.6,-0.3,0.7,0)infinite;

 

　　}

 

　　增加小方块变形的动画，使它看起来有下蹲起跳的拟人效果：

 

　　

 

　　.containerspan{

 

　　animation:

 

　　movevar(--duration)cubic-bezier(0.6,-0.3,0.7,0)infinite,

 

　　morphvar(--duration)ease-in-outinfinite;

 

　　}

 

　　@keyframesmorph{

 

　　0%,50%,100%{

 

　　transform:scale(0.75,1);

 

　　}

 

　　25%,75%{

 

　　transform:scale(1.5,0.5);

 

　　}

 

　　}

 

　　至此，完成了1个方块的动画。接下来设置多个方块的动画效果。

 

　　为子元素定义CSS下标变量：

 

　　.containerdiv:nth-child(1){--n:1;}

 

　　.containerdiv:nth-child(2){--n:2;}

 

　　.containerdiv:nth-child(3){--n:3;}

 

　　.containerdiv:nth-child(4){--n:4;}

 

　　.containerdiv:nth-child(5){--n:5;}

 

　　.containerdiv:nth-child(6){--n:6;}

 

　　.containerdiv:nth-child(7){--n:7;}

 

　　.containerdiv:nth-child(8){--n:8;}

 

　　.containerdiv:nth-child(9){--n:9;}

 

　　旋转子元素，使小方块分布均匀地在容器的四周，围合成一个圆形：

 

　　.containerp{

 

　　transform:rotate(calc(var(--n)*40deg));

 

　　}

 

　　设置动画延时，现在看起来就像是一群小方块贴着一个圆的内边线在旋转了（但实际上没有任何元素在做旋转运动，大脑感觉到的旋转是一种错觉）：

 

　　.containerspan{

 

　　animation-delay:calc(var(--duration)/9*var(--n)*-1);

 

　　}

 

　　最后，为小方块上色：

 

　　.containerspan{

 

　　background-color:hsl(calc(var(--n)*80deg),100%,70%);

 

　　}






本文转载自中文网