示例

HTML

<svg id="patternSVG" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="sqrs" width="20" height="20" patternUnits="userSpaceOnUse" id="pulseBg" viewBox="0 0 20 20" ><rect class="gridRect" x="0" y="0" width="20" height="20"  fill="none"/>       </pattern></defs><rect id="grid"  class="grid" y="-100" fill="url(#sqrs)" width="100%" height="200%" stroke="none"/></svg><svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><defs><filter id="glow" x="-100%" y="-100%" width="250%" height="250%"><feGaussianBlur stdDeviation="8" result="coloredBlur" /><feOffset dx="0" dy="0" result="offsetblur"></feOffset><feFlood id="glowAlpha" flood-color="#FFF" flood-opacity="1"></feFlood><feComposite in2="offsetblur" operator="in"></feComposite><feMerge><feMergeNode/>          <feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter>
</defs><g ><polyline class="trailLine"/><polyline class="trailLine"/><polyline class="trailLine"/><polyline class="trailLine"/><polyline class="trailLine"/><polyline class="trailLine"/><path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" /><path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" /><path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" /><path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" /><path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" /><path class="plane" d="M20,13.7v-1.4l-8.6-5.1V3.5c0-1-0.6-3.5-1.4-3.5S8.6,2.4,8.6,3.5v3.7L0,12.2v1.4l8.6-1.8l0.5,5l-2.5,1.9V20l3.5-0.8l3.5,0.8v-1.2L11,16.9l0.5-5L20,13.7z" /></g></svg>

CSS

body {background-color: #141723 ;
/* background-color: #FFF ; */overflow: hidden;text-align:center;display: flex;align-items: center;justify-content: center;}body,
html {height: 100%;width: 100%;margin: 0;padding: 0;
}
:root {--line-stroke: #0074b3;/* --grid-stroke: #00adef; */--line-stroke-width: 1.5;--circle-fill: #00adef;--circle-stroke: #0074b3;
}svg {position: absolute;width: 100%;height: 100%;visibility: hidden;}
.trailLine {stroke:var(--line-stroke);stroke-width: var(--line-stroke-width);fill: none;stroke-linecap: round;stroke-linejoin: round;stroke-dasharray: 4 10
}
.gridRect {stroke:var(--circle-stroke);}
#grid {opacity: 0.085;}
#glowAlpha {flood-color: var(--circle-stroke)
}
.plane {fill:#CCC;
}

JS

let select = s => document.querySelector(s),selectAll = s =>  document.querySelectorAll(s),mainSVG = select('#mainSVG'),trailLine = select('#trailLine'),numPoints = 300,svgHeight = 600,height = svgHeight,allPlanes = gsap.utils.toArray('.plane'),allTrailLines = selectAll('.trailLine'),allTrailPoints = [],planeColorArray = ['#04BCE8', '#EA6360', '#4EBE92', '#A83395', '#4A52A6', '#F2CD5D'],planeWidth = allPlanes[0].getBBox().width;gsap.defaults({lazy:true}) gsap.set('svg', {visibility: 'visible'
})
gsap.set(allPlanes, {transformOrigin: '50% 100%',yPercent: -20
})
let p = CustomEase.create('trail', 'M0,0 C0,0 0.08957,0.04997 0.14563,0.07332 0.17361,0.08497 0.19406,0.08816 0.22447,0.09346 0.25234,0.09831 0.27245,0.10281 0.29876,0.1 0.3304,0.09662 0.3574,0.09206 0.38526,0.07627 0.46146,0.0331 0.50906,-0.01658 0.58698,-0.06332 0.61735,-0.08154 0.64322,-0.09168 0.67604,-0.09815 0.70315,-0.10349 0.72556,-0.09999 0.75503,-0.09644 0.7862,-0.09269 0.8064,-0.0881 0.83671,-0.07879 0.87049,-0.06842 0.89148,-0.06013 0.92338,-0.04473 0.95378,-0.03007 1,0 1,0 ');const swayPlane = (_id) => {gsap.set(allPlanes[_id], {x: allTrailPoints[_id][0].x - (planeWidth/2),y: allTrailPoints[_id][0].y - planeWidth})gsap.to(allPlanes[_id], {duration: 0.1,rotation: ((planeInitArray[_id].x - (allTrailPoints[_id][50].x)) * 0.72),ease: 'sine.inOut'})
}let planeInitArray = []
let duration = gsap.utils.random(5, 20);
for(var j = 0; j < allPlanes.length; j++) {let trailLine = allTrailLines[j];let pointX = gsap.utils.random(250, 350);let pointArray = [];let heightMultiplier = gsap.utils.random(0.11, 0.8);gsap.set(allTrailLines[j], {stroke: planeColorArray[j]})for(let i = 0; i < numPoints; i++) {let point = trailLine.points.appendItem(mainSVG.createSVGPoint());pointArray.push(point)point.x = pointX;gsap.set(point, {y:(height * heightMultiplier) + (i * ((height ) / numPoints))})           }
allTrailPoints.push(pointArray)planeInitArray.push({x: pointArray[0].x, y: pointArray[0].y} );let tl = gsap.timeline();tl.to(allTrailPoints[j], {duration: gsap.utils.random(7, 14),x: '-=' + gsap.utils.random(-600, 600),stagger: {each: duration / 1000,repeat: -1},onUpdate: swayPlane,onUpdateParams:[j],ease: 'trail'}).seek(gsap.utils.random(300, 1000));}let extraTl = gsap.timeline();
extraTl.to(allTrailLines, {strokeDashoffset:-(14 * 4),repeat: -1,ease: 'none'
}).to('#grid', {duration: 1,y: '+=40',ease: 'none',repeat: -1
}, 0)

飞机步道（plane trails）相关推荐

Problem N: 设计飞机类Plane及其派生类
Problem Description 设计一个飞机Plane类,由它派生出歼击机Fighter类和轰炸机Bomber类,歼击机Fighter类和轰炸机Bomber类又共同派生出歼轰机(多用途战斗机) ...
PHP3d地球,three.js绘制地球、飞机与轨迹的效果示例
对于three.js不太熟悉的朋友们可以参考这篇文章,threejs官网:https://threejs.org/ 首先我们来看下要实现的效果这个缩小后的图片,下面我们来看下近距离的动态效果.. 效 ...
Python基础-Pygame游戏框架之飞机大战
Pygame游戏框架 Pygame Pygame是一套跨平台的Python模块,专为编写游戏而设计. 它包括计算机图形和声音库,旨在与Python编程语言一起使用. 展示窗体引入pygame模块 i ...
python飞机大战源码素材包_python（pygame）滑稽大战(类似飞机大战) 教程
成品已录制视频投稿B站(本文目前实现了基础的游戏功能),点击观看本帖曾在百度贴吧直播,但由于人气低反响差已停更. 项目稽忽悠不(github)地址(目前只上传了素材,代码还在整理中): https: ...
C#飞机大战案例详细教程
飞机大战游戏开发稳定版实现效果如下子弹碰撞敌机己方碰撞敌机己方飞机碰撞补给飞机跟随鼠标移动爆炸动画爆炸音效需要拓展的请自行拓展,欢迎大佬点评! 运行界面截图运行界面截图实现功能:1 ...
飞机大战小游戏(超详细)
偷学Python之最后的项目二:飞机大战小游戏(超详细) 古之立大事者,不惟有超世之才,亦必有坚忍不拔之志.--苏轼甜甜先说这次用Python中的pygame模块来完成一个飞机大战的小游戏:基本思 ...
Python+Pgzrun制作打飞机游戏（附源码）
目录基本框架创建滚动背景创建飞机让plane移动发射子弹创建敌机敌机移动金币制度关卡制度设置创建更高级飞机(SRplane和SSRplane ) 开始炸弹介绍源码基本框架 ...
树莓派基于PS2操纵杆的飞机大战小游戏
击中病毒LED灯闪烁 PS2操纵杆.PCF8591 PCF8591: SDA - SDA SCL - SCL VCC - 5V GND - GND AIN1.AIN2.AIN3找空插即可 PS2操纵杆 ...
飞机大战--java
菜鸟日记-2月10日案例 : 飞机大战要求: 玩家可控制飞机躲避炮弹,界面显示玩家游玩时间效果: 1.游戏物体根类 (飞机,炮弹等类都继承于此类) import java.awt.*;/* * ...

飞机步道（plane trails）

飞机步道（plane trails）

示例

HTML

CSS

JS

飞机步道（plane trails）相关推荐

最新文章

热门文章