怎么用纯CSS实现类似于旗帜飘扬动画效果

这篇文章将为大家详细讲解有关怎么用纯CSS实现类似于旗帜飘扬动画效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

　　代码解读

　　定义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;

　　}

　　.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;

　　}

　　}

关于“怎么用纯CSS实现类似于旗帜飘扬动画效果”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。