源代码下载

 

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

 

　　代码解读

 

　　定义dom，容器中包含15个元素：

 

　　

 

　　<divclass="flag">

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　<span></span>

 

　　</div>

 

　　居中显示：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　background-color:black;

 

　　}

 

　　定义容器尺寸：

 

　　.flag{

 

　　width:10em;

 

　　height:15em;

 

　　font-size:20px;

 

　　}

 

　　设置线条样式：

 

　　.flagspan{

 

　　width:0.25em;

 

　　height:inherit;

 

　　background-color:deepskyblue;

 

　　}

 

　　让线条平铺：

 

　　.flag{

 

　　display:flex;

 

　　justify-content:space-between;

 

　　}

 

　　增加3d透视效果：

 

　　.flag{

 

　　transform:perspective(500px)rotateY(-20deg);

 

　　}

 

　　定义左右移动的动画效果：

 

　　.flagspan{

 

　　animation:wave1.5sease-in-outinfinitealternate;

 

　　}

 

　　@keyframeswave{

 

　　to{

 

　　transform:translateX(2em);

 

　　}

 

　　}

 

　　设置元素变量值：

 

　　

 

　　.flagspan:nth-child(1){

 

　　--n:1;

 

　　}

 

　　.flagspan:nth-child(2){

 

　　--n:2;

 

　　}

 

　　/*共15个元素，每元素的--n变量值等于它的序号。*/

 

　　/*中间代码略……*/

 

　　.flagspan:nth-child(14){

 

　　--n:14;

 

　　}

 

　　.flagspan:nth-child(15){

 

　　--n:15;

 

　　}

 

　　让各线条分别延时启动动画，形成旗帜飘扬的效果：

 

　　.flagspan{

 

　　animation-delay:calc(var(--n)*-0.1s);

 

　　}

 

　　最后，增加光影效果：

 

　　.flagspan{

 

　　background-color:ghostwhite;

 

　　}

 

　　@keyframeswave{

 

　　to{

 

　　transform:translateX(2em);

 

　　background-color:deepskyblue;

 

　　}

 

　　}








本文转载自中文网