css实现纸飞机折叠飞行动画效果代码-html代码-BFW代码库

css实现纸飞机折叠飞行动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现纸飞机折叠飞行动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        body {
          background:lightblue;
          height:100vh;
          margin:0;
          display:grid;
          place-content:center;
          perspective:400px;
        }
        .plane {
          width:250px;
          height:150px;
          display:grid;
          transform-style:preserve-3d;
          transform:rotateX(0deg) rotate(0deg);
          animation:n4 1.4s linear both 3s;
        }
        .plane i {
          display:inherit;
          grid-area:1/1;
          animation:n2 1s linear both 2s;
          transform-style:preserve-3d;
        }
        .plane i:last-child {
          grid-area:1/2;
        }
        *:before,
        *:after{
          content:"";
          grid-area:1/1;
          transform-origin:inherit;
        }
        
        .plane:before,
        .plane:after {
          background:#eee;
          clip-path:polygon(0 0,100% 0,0 100%);
          animation:n1 1s linear forwards 1s;
        }
        .plane:after {
          clip-path:polygon(0 0,100% 0,100% 100%);
          grid-area:1/2;
        }
        
        .plane i:first-child {
          transform: rotate(-20deg);
          transform-origin:100% 0;
        }
        .plane i:first-child:after{
          background:#eee;
          clip-path:polygon(100% 0,0 100%,50% 100%);
.........完整代码请登录后点击上方下载按钮下载查看