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

css实现纸飞机云中飞行动画效果代码

代码语言：html

所属分类：动画

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

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


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
* {
  box-sizing: border-box;
}

.root > svg {
  display: inline-block;
  position: absolute;
  top: -1%;
  left: 10%;
  transform: translateX(2000px);
  animation: float 8s linear infinite forwards;
  opacity: 0.4;
}

html {
  background-color: #a3a3f4;
}

body {
  margin: 0;
  position: relative;
}

html,
body {
  overflow: hidden;
  height: 100vh;
}

.root {
  height: 100%;
  width: 10%;
  overflow: hidden;
}
.root .plane > svg {
  top: 40%;
  transform-origin: center right;
  animation: fly 11s linear infinite;
  position: absolute;
  max-height: 200px;
  z-index: 999999;
}

@keyframes fly {
  0%, 100% {
    transform: rotate(45deg) translateX(30%);
  }
  33% {
    transform: rotate(25deg) translateX(50%);
  }
  66% {
    transform: rotate(60deg) translateX(10%);
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(10%) translateX(100%);
  }
  80% {
    transform: translateY(10%) translateX(-100%);
  }
  90% {
    transform: translateY(-500%) translateX(-100%);
  }
  95% {
    transform: translateY(-500%) translateX(100%);
  }
}
</style>

</head>

<body>
  <div id="root" class="root">
	<div class="plane">
		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1240 880">
			<path style="fill:#fafafa; stroke:none;" d="M22 490C35.3403 497.029 50.8846 501.101 65 506.425C98.9786 519.241 133.197 531.527 167 544.797C178.584 549.345 190.316 553.659 202 557.947C207.451 559.947 215.301 561.371 219.581 565.499C224.498 570.242 226.073 580.711 228.424 587C235.132 604.94 241.36 623.055 248.05 641C272.321 706.102 291.739 774.544 320 838C333.8 826.767 344.188 807.247 354.873 793L425.373 699L451.526 664C454.525 660.002 458.316 652.18 463.093 650.212C467.945 648.214 476.402 653.43 481 654.997C497.065 660.471 512.904 666.625 529 672C573.917 687.001 618.261 703.813 663 719.344C681.202 725.663 700.97 736.15 720 739L727.718 683L745.718 557L796.282 202L819 42L785 60.1396L722 95.5756L529 204.14L178 401.576L73 460.576L22 490z" />
			<path style="fill:#d5d5d5; stroke:none;" d="M693 204C650.582 238.544 611.58 278.128 571 314.83C509.222 370.705 446.958 426.15 386 482.91C360.728 506.442 335.075 529.936 309 552.576C301.846 558.787 295.1 565.45 288 571.714C285.142 574.237 280.741 576.986 279.929 581C279.139 584.906 282.086 590.363 283.344 594L293.495 623C306.239 659.709 323.245 697.155 332 735L333 735L363.576 652L378.728 612L400.119 584L446.576 524L573.424 360L661.732 246L683.576 218L693 204z" />
		</svg>
	</div>
</div>

  
      <script>
"use strict";
function* CircleGenerator(pos) {
    // Start with:
    // Position = Center Position
    const [cx, cy] = pos;
    let [x, y] = [cx, cy];
    // Radius = Max Radius
    let radius = 48;
    // Left Angle = 180
    let leftAngle = 180;
    // Right Angle = 0
    let rightAngle = 0;
    const rand = (min, max) => {
        min = Math.ceil(min);
        max = Math.floor(max);
        return Math.floor(Math.random() * (max - min)) + min;
    };
    while (true) {
        // PICK TWO ANGLES: Left and Right
        // Left should be between 155 and 205 degrees
        leftAngle = rand(155, 205);
        // Right should be between -35 and 35 degrees
        rightAngle = rand(-25, 25);
        // get next set o.........完整代码请登录后点击上方下载按钮下载查看