Skip to content

Instantly share code, notes, and snippets.

@djsubstance

djsubstance/hologram-shooter.markdown

Created May 23, 2022 16:28
Show Gist options
  • Save djsubstance/bf5f989adc1bbe214e22980610ee8f26 to your computer and use it in GitHub Desktop.
Save djsubstance/bf5f989adc1bbe214e22980610ee8f26 to your computer and use it in GitHub Desktop.
Download ZIP
Hologram shooter
Raw
script.vue
<!-- ALL THE HTML -->
<template>
<div id="app">
<div
v-for="(item, index) in clouds"
class="cloud"
:id="'cloud-' + index"
:style="makeStarStyles(index)"
></div>
<!--<button class="testbtn" @click="changeDisplay">Fire!</button> -->
<div id="holoLoader" :class="displayMode ? 'active' : 'notActive'">
<div class="holoLayer" id="core"><canvas id="coreCanvas" /></div>
<div class="holoLayer" id="firstCircle">
<canvas width="450" height="450" id="secondCanvas" />
</div>
<div class="holoLayer" id="secondCircle">
<div class="slider a">
<div class="sliderPoint a">
<!-- <div v-for="item in sparks" class="spark" /> -->
</div>
</div>
</div>
<div class="holoLayer" id="thirdCircle"></div>
<div class="holoLayer" id="fourthCircle"></div>
<div class="holoLayer" id="fifthCircle">
<canvas id="firstCanvas" />
</div>
<div class="holoLayer" id="sixthCircle"></div>
</div>
<canvas width="470" height="200" id="shootingParticles" :class="displayMode ? 'active' : 'notActive'"/>
</div>
</template>
<!-- ALL THE JAVASRIPT -->
<script>
export default {
data() {
return {
clouds: 50,
particles:300,
particleArray:[],
shootingParticles:100,
shootingParticlesArray:[],
ringNumber:8,
stylesArray:[],
ringArray:[],
instances: 4,
count:300,
countArray:[],
start:65,
then: Date.now(),
displayModeEngage:Date.now(),
displayMode:false,
angles:[[0,25,10,'rgba(255,255,255,1)'],
[50,76,10,'rgba(255,255,255,1)'],
[101,126,10,'rgba(255,255,255,1)'],
[152,177,10,'rgba(255,255,255,1)'],
[203,227,10,'rgba(255,255,255,1)'],
[258,279,10,'rgba(255,255,255,1)'],
[305,334,10,'rgba(255,255,255,1)'],
],
};
},
methods: {
changeDisplay() {
this.displayMode = !this.displayMode
this.displayModeEngage = Date.now();
//console.log("changed display!")
},
loop() {
let now = Date.now();
let delta = now - this.then;
this.update();
this.render();
this.then = now;
requestAnimationFrame(this.loop);
},
update() {
if(this.displayMode === false) {
this.start = this.start + 0.2;
this.start >= 100 ? (this.changeDisplay(), this.start = 100) : null;
}
else {
this.start = this.start - 0.4;
this.start <= 0 ? (this.changeDisplay(), this.start = 0) : null;
}
//console.log(this.start)
this.particleArray.forEach((item, index) => {
this.adjustLength(item);
this.moveParticle(item);
})
this.shootingParticlesArray.forEach((item, index) => {
this.moveShootingParticle(item)
})
this.ringArray.forEach((item, index) => {
this.updateRings(item)
})
this.countArray.forEach((item, index) => {
this.updateCount(item)
})
//console.log("we updating!")
},
render() {
let canvas1 = document.getElementById("coreCanvas");
let canvas2 = document.getElementById("firstCanvas");
let canvas3 = document.getElementById("secondCanvas");
let canvas4 = document.getElementById("shootingParticles")
let ctx = canvas1.getContext("2d");
let ctx2 = canvas2.getContext("2d");
let ctx3 = canvas3.getContext("2d");
let ctx4 = canvas4.getContext("2d");
ctx.globalCompositeOperation = 'screen'; //test */
ctx4.globalCompositeOperation = 'screen'; //test */
ctx.clearRect(0, 0, canvas1.width, canvas1.height);
this.particleArray.forEach((item, index) => {
this.renderParticle(item, ctx)
})
ctx2.clearRect(0, 0, canvas2.width, canvas2.height);
this.drawCircularPlate(this.angles, ctx2);
ctx3.clearRect(0, 0, canvas3.width, canvas3.height);
this.countArray.forEach((item, index) => {
this.drawCounter(item, ctx3)
})
this.drawShootTime(this.start, ctx3)
this.drawOuterRing(this.ringArray, ctx3);
ctx4.clearRect(0,0,canvas4.width, canvas4.height);
this.shootingParticlesArray.forEach((item, index) => {
this.renderShootingParticles(item, ctx4)
})
/* ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'lighten'; //test */
//console.log("we rendering!")
},
createShootingParticles(number) {
for(let n=0;n<number;n++) {
let obj = {
x:470,
y:95 + (Math.random() * 12 - 6),
radius:Math.random() * 5 + 15,
speed:Math.random() * 7 + 1,
opacity:1,
delay:Math.floor(Math.random() * 1000),
}
this.shootingParticlesArray.push(obj);
}
},
drawCounterInitiation(number) {
for(let n=0; n<number; n++) {
let obj = {
number: n,
opacity:Math.random(),
reverse:true,
start: n * (360/number),
finish:(n + 1) * (360/number) ,
fill: "transparent",
shadow: "rgba(255,255,255,0.5)",
strokeStyle:"255,255,255",
lineWidth: Math.floor(Math.random() * 5 + 3)
}
this.countArray.push(obj)
}
},
drawShootTime(start, ctx) {
let finish = 360/100 * start - 90;
ctx.strokeStyle = "rgba(255,255,255," + start/100 + ")";
ctx.beginPath();
ctx.arc(450/2, 450/2, 185, -90 * (Math.PI / 180), finish * (Math.PI / 180));
ctx.stroke();
ctx.closePath();
//X = Math.cos(angle*Math.PI/180) * length + startPointX
let calculateX = Math.cos((finish+5)*Math.PI/180) * 185 + (450/2)
//Y = Math.sin(angle*Math.PI/180) * length + startPointY
let calculateY = Math.sin((finish+5)*Math.PI/180) * 185 + (450/2)
ctx.fillStyle = "white";
ctx.textAlign = "center";
ctx.font = "10px Arial";
ctx.fillText(start.toString().substring(0,2) + "%", calculateX, calculateY);
},
updateCount(item) {
if(item.reverse === true) {
item.opacity -= 0.01;
item.opacity < 0.1 ? item.reverse = false : null
}
if(item.reverse === false) {
item.opacity += 0.01;
item.opacity > 0.9 ? item.reverse = true : null
}
},
drawCounter(item, ctx) {
if(item.number % 2) {
ctx.beginPath();
ctx.strokeStyle = "rgba(" + item.strokeStyle + "," + item.opacity + ")";
ctx.arc(450/2, 450/2, 215 + (item.lineWidth/2), item.start * (Math.PI / 180), item.finish * (Math.PI / 180));
ctx.fillStyle = item.fill;
ctx.fill();
ctx.shadowColor = item.shadow;
ctx.shadowBlur = 8;
ctx.lineWidth = item.lineWidth
ctx.strokeStyle = 1;
ctx.stroke();
ctx.closePath();
}
},
createCoreParticles(number) {
for(let n=0;n<number;n++) {
let angle = Math.floor(Math.random() * 360);
let ring = Math.floor(Math.random() * 25);
let length = 80 + Math.random() * 40;
let speed = Math.random() - 0.5;
speed > 0.3 ? speed = 0.3 : speed = speed;
let particle = {
x:250 + (length + ring * Math.cos(angle * (Math.PI / 180))),
y:250 + (length + ring * Math.sin(angle * (Math.PI / 180))),
radius:Math.random() * 2 + 2,
startRadius:Math.random() * 2 + 2,
length:length,
speed:speed,
usedLength:length,
grow:Math.random() > 0.5 ? true : false,
startAngle:angle,
number:n,
usedAngle:angle,
ring: ring,
color: Math.random() > 0.5 ? "rgba(255, 255, 255,0.3)" : "rgba(214,107,24,0.3)",
shadow:"rgba(0, 0, 0,1)",
number:n,
}
this.particleArray.push(particle);
}
},
makeStarStyles(cloud) {
if(document.getElementById("cloud-" + cloud) === null) {
let radius = Math.floor(Math.random() * 230 + 130);
let x = "top:" + Math.floor(Math.random() * document.body.clientHeight - radius/2) + "px";
let y = "left:" + Math.floor(Math.random() * document.body.clientWidth - radius/2) + "px";
let animationTime = Math.floor(Math.random() * 10 + 5);
let animationDelay = Math.floor(Math.random() * 15);
let background = "background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 34%, rgba(217,217,217,0.0) 70%)";
let style = "position:absolute;" + x + ";" + y + ";" + "height:" + radius + "px;" + "width:" + radius + "px;" + "border-radius:180px;" + background + ";animation-duration: " + animationTime + "s;animation-delay:" + animationDelay + "s;";
this.stylesArray.push(style)
//console.log(style)
return style;
}
else {
return this.stylesArray[cloud]
}
},
renderParticle(particle, ctx) {
var grd = ctx.createRadialGradient(particle.x, particle.y, 1, particle.x, particle.y, particle.radius-particle.radius/10);
grd.addColorStop(0,particle.color);
grd.addColorStop(1,"rgba(255,255,255,0)");
ctx.fillStyle = grd;
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
},
renderShootingParticles(particle, ctx) {
if(particle.x < 470) {
ctx.fillStyle = "rgba(255,255,255," + particle.opacity + ")";
ctx.beginPath();
ctx.arc(particle.x, particle.y, particle.radius, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
}
},
moveShootingParticle(item) {
if(this.displayMode === true && Date.now() > this.displayModeEngage + 1000) {
item.opacity = item.x/470;
item.x/470 * 10 > 0 ? item.radius = item.x/470 * 10 : item.radius = 0;
if(item.x > 0) {
if(Date.now() > this.displayModeEngage + 1000 + item.delay) {
item.x = item.x - item.speed
}
}
else {
item.x = 470
}
}
else if(this.displayMode === false && Date.now() < this.displayModeEngage + 1500) {
item.opacity = item.x/470;
item.x/470 * 10 > 0 ? item.radius = item.x/470 * 10 : item.radius = 0;
item.x = item.x - item.speed
}
else if(this.displayMode === false && Date.now() > this.displayModeEngage + 1500) {
item.x = 470;
}
},
createRings(rings, array) {
//console.logs
for(let i = 0; i < rings ; i ++) {
let distance = (360/rings)
let startAng = Math.floor(Math.random() * 360)
let endAng = startAng + Math.random() * 50 + 50;
//let distance = Math.floor(Math.random() * 50 + 50)
let distandeDrawn = (360/rings) / 100 * 90
let distanceTransparent = (360/rings) / 100 * 10
let obj = {
startAng: startAng * (Math.PI / 180),
endAng: endAng * (Math.PI / 180),
length: 120 + 7 * i,
shown:true,
moveDirection:Math.random() > 0.5 ? true : false,
moveDone:false,
}
array.push(obj);
console.log(obj)
}
},
updateRings(ring) {
if(ring.moveDone === false) {
ring.moveDirection ?
(ring.startAng -= 0.01, ring.endAng -= 0.01) :
(ring.startAng += 0.01, ring.endAng += 0.01);
Math.random() < 0.02 ? ring.moveDone = true : null;
}
else {
ring.moveDirection = !ring.moveDirection;
ring.moveDone = false
}
},
drawOuterRing(points, ctx) {
points.forEach(item => {
if(item.shown === true) {
//console.log(item.startAng, item.endAng)
ctx.beginPath();
ctx.arc(450/2, 450/2, item.length, item.startAng, item.endAng, 0, 2 * Math.PI);
ctx.fillStyle = 'transparent'
ctx.fill();
ctx.shadowColor = 'rgba(255,255,255,1)';
ctx.shadowBlur = 15;
ctx.lineWidth = 5;
ctx.strokeStyle = "rgba(255,255,255,1)";
ctx.stroke();
ctx.closePath();
}
})
},
adjustLength(particle) {
//particle.number === 0 ? console.log(particle.grow) : null
if(particle.grow && !this.displayMode) {
particle.usedLength += Math.abs(particle.speed) / 2;
particle.usedLength > particle.length + 20 ? particle.grow = false : null;
particle.radius > particle.startRadius ? (particle.radius -= 0.5, particle.usedLength += particle.radius / 3) : null;
}
else if(!particle.grow && !this.displayMode) {
particle.usedLength -= Math.abs(particle.speed) / 2;
particle.usedLength < particle.length - 20 ? particle.grow = true : null;
particle.radius > particle.startRadius ? (particle.radius -= 1) : null;
}
else if(this.displayMode) {
!particle.grow ? particle.grow = true : null;
particle.usedLength > 0 ? particle.usedLength -= particle.radius / 10 : null;
particle.radius < 25 ? particle.radius += 1 : null;
}
},
moveParticle(particle) {
//Math.random() < 0.5 ? particle.usedLength++ : particle.usedLength--;
particle.usedAngle = particle.usedAngle + particle.speed;
particle.x = 250 + particle.usedLength * Math.cos(particle.usedAngle * (Math.PI / 180));
particle.y = 250 + particle.usedLength * Math.sin(particle.usedAngle * (Math.PI / 180));
},
drawCircularPlate(angles,ctx) {
angles.forEach((item) => {
ctx.beginPath();
ctx.arc(450/2, 450/2, 150, item[0] * (Math.PI / 180), item[1] * (Math.PI / 180));
ctx.fillStyle = 'transparent'
ctx.fill();
ctx.shadowColor = item[3];
ctx.shadowBlur = 15;
ctx.lineWidth = item[2];
ctx.strokeStyle = item[3];
ctx.stroke();
ctx.closePath();
})
ctx.beginPath();
ctx.arc(450/2, 450/2, 138, 0, 2 * Math.PI);
ctx.fillStyle = 'transparent'
ctx.fill();
ctx.shadowColor = 'rgba(255,255,255,1)';
ctx.shadowBlur = 15;
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(255,255,255,1)';
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(450/2, 450/2, 163, 0, 2 * Math.PI);
ctx.fillStyle = 'transparent'
ctx.fill();
ctx.shadowColor = 'rgba(255,255,255,1)';
ctx.shadowBlur = 15;
ctx.lineWidth = 2;
ctx.strokeStyle = 'rgba(255,255,255,1)';
ctx.stroke();
ctx.closePath();
}
},
mounted() {
this.drawCounterInitiation(this.count);
this.createCoreParticles(this.particles);
this.createShootingParticles(this.shootingParticles);
this.createRings(this.ringNumber,this.ringArray);
let canvas1 = document.getElementById("coreCanvas");
canvas1.width = document.getElementById("core").offsetWidth;
canvas1.height = document.getElementById("core").offsetHeight;
let canvas2 = document.getElementById("firstCanvas");
canvas2.width = document.getElementById("firstCircle").offsetWidth;
canvas2.height = document.getElementById("firstCircle").offsetHeight;
let ctx2 = canvas2.getContext("2d");
this.drawCircularPlate(this.angles, ctx2);
let canvas3 = document.getElementById("secondCanvas");
canvas2.width = document.getElementById("firstCircle").offsetWidth;
canvas2.height = document.getElementById("firstCircle").offsetHeight;
window.addEventListener("resize", function(){
let canvas1 = document.getElementById("coreCanvas");
canvas1.width = document.getElementById("core").offsetWidth;
canvas1.height = document.getElementById("core").offsetHeight;
let canvas2 = document.getElementById("firstCanvas");
canvas2.width = document.getElementById("firstCircle").offsetWidth;
canvas2.height = document.getElementById("firstCircle").offsetHeight;
let canvas3 = document.getElementById("secondCanvas");
canvas2.width = document.getElementById("firstCircle").offsetWidth;
canvas2.height = document.getElementById("firstCircle").offsetHeight;
}, true);
//Let's start this!
//we go!
this.loop();
}
};
</script>
<!-- ALL THE STYLES -->
<style>
:root {
--main-blue-color: #13aeff;
--main-white-color: #ffffff;
--main-orange-color: #d66b18;
}
body {
width:100vw;
height:100vh;
margin:0;
padding:0;
overflow:hidden;
background-image: radial-gradient( circle farthest-corner at 10% 20%, rgba(28,38,47,1) 0%, rgba(37,47,57,1) 90% );
}
.testbtn {
position: absolute;
top: 20px;
left: calc(50vw - 25px);
height: 20px;
box-shadow: 0px 0px 15px 0px rgba(255, 255, 255, 0.5);
text-transform: uppercase;
height: 25px;
width: 70px;
background-color: transparent;
z-index: 10000000000000;
color: white;
border: 1px solid white;
}
.cloud {
z-index:-1;
opacity:0.5;
animation:cloudFade;
}
@keyframes cloudFade {
0% {opacity:0.5;}
50% {opacity:0;}
100% {opacity:0.5;}
}
@keyframes reverseRotate {
from { transform:rotate(0deg) }
to { transform:rotate(360deg) }
}
@keyframes rotate {
from { transform:rotate(360deg) }
to { transform:rotate(0deg) }
}
#secondCircle .slider {
background-color: transparent;
width: calc(50% + 4px);
box-sizing: border-box;
height: 8px;
top:calc(50% - 4px);
left:calc(50% - 4px);
position: relative;
animation:rotate 8s infinite linear;
transform-origin: 4px 4px;
}
#secondCircle .sliderPoint.a {
box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
left: calc(100% - 2px);
width: 4px;
background-color: rgba(255,255,255,0.55);
position:relative;
box-sizing: border-box;
border-radius: 100%;
height: 4px;
}
#secondCircle .sliderPoint.a:before {
content: '';
box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
width: 4px;
position: relative;
top: 183px;
left: -285px;
border-radius: 90px;
height: 4px;
display: block;
background-color: rgba(255,255,255,0.55);
}
#secondCircle .sliderPoint.a:after {
content: '';
box-shadow: 0px 0px 3px 2px rgba(255,255,255,0.55);
width: 4px;
position: relative;
top: -190px;
left: -270px;
border-radius: 90px;
height: 4px;
display: block;
background-color: rgba(255,255,255,0.55);
}
#holoLoader.active .sliderPoint.a:after {
animation:sparks 3s infinite linear 0s;
}
#holoLoader.active .sliderPoint.a:before {
animation:sparks 3s infinite linear 1.2s;
}
#holoLoader.active .sliderPoint.a {
animation:sparks 3s infinite linear 0.3s;
}
@keyframes sparks {
0% {
box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);
}
60% {
box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);
}
61% {
box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75);
}
62% {
box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);
}
84% {
box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);
}
85% {
box-shadow: 0px 0px 5px 8px rgba(255,255,255,0.75);
}
86% {
box-shadow: 0px 0px 5px 3px rgba(255,255,255,0.75);
}
}
#holoLoader {
z-index:1;
//box-shadow: 0px 0px 39px 0px rgba(148,255,241,1);
position:relative;
border-radius:50%;
background-color:rgba(255,255,255,0);
width:500px;
height:500px;
margin:auto;
margin-top:calc(50vh - 250px);
transition:all 0.5s ease-in-out 0.4s;
//transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);
}
.holoLayer {
//background: radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(202,226,255,0) 65%, rgba(147,196,255,1) 100%);
//box-shadow: 0px 0px 39px 0px rgba(148,255,241,0.3);
border-radius:360px;
transition:all 0.5s ease-in-out 0s;
}
#holoLoader.active {
transform: perspective(1000px) rotateX(30deg) rotateY(-50deg) rotateZ(0deg);
transition:all 0.5s ease-in-out;
}
#core {
width:100%;
height:100%;
background:radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 17%, rgba(147,196,255,0.1) 24%, rgba(255,255,255,0) 30%)
}
#coreCanvas, #firstCanvas, #secondCanvas {
width:100%;
height:100%;
}
#firstCircle {
position:absolute;
top:0px;
width:90%;
height:90%;
margin:5%;
}
@keyframes stutterMovement {
0% {
transform:rotate(0deg)
}
10% {
transform:rotate(50deg)
}
30% {
transform:rotate(50deg)
}
40% {
transform:rotate(50deg)
}
45% {
transform:rotate(70deg)
}
60% {
transform:rotate(-20deg)
}
70% {
transform:rotate(0deg)
}
85% {
transform:rotate(20deg)
}
90% {
transform:rotate(0deg)
}
100% {
transform:rotate(0deg)
}
}
#holoLoader.active #firstCircle {
transform: translateX(-130px) translateY(-80px);
transition:all 0.5s ease-in-out 0.4s;
}
#secondCircle {
position:absolute;
top:0px;
width:80%;
height:80%;
margin:10%;
border:1px solid var(--main-orange-color);
}
#secondCircle:before {
transition:all 0.5s ease-in-out 0s;
content:'';
border:7px dotted rgba(79, 223, 255,0.3);
position:absolute;
top:0px;
width:100%;
height:100%;
top: 0px;
left: 0px;
border-radius:360%;
opacity:0;
}
#secondCircle:after {
transition:all 0.5s ease-in-out 0s;
content:'';
border:5px solid rgba(79, 223, 255,0.7);
position:absolute;
top:0px;
width:100%;
height:100%;
border-radius:360%;
opacity:0;
}
#holoLoader.active #secondCircle {
border:2px solid rgba(255, 255, 255,0.5);
transform:translateX(-180px) translateY(-120px);
transition:all 0.5s ease-in-out 0.4s;
}
#holoLoader.active #secondCircle:before {
opacity:1;
top: -55px;
left: -75px;
transition:all 0.5s ease-in-out 0.4s;
animation: rotation 5s linear 0s infinite;
transformation-origin:100% 100%;
}
@keyframes rotation {
0% {
transform:rotateZ(0deg)
}
100% {
transform:rotateZ(360deg)
}
}
#holoLoader.active #secondCircle:after {
opacity:1;
transform: translateX(45px) translateY(35px);
transition:all 0.5s ease-in-out 0.4s;
}
#thirdCircle {
position:absolute;
top:0px;
width:70%;
height:70%;
margin:15%;
border:0px solid white;
opacity:0;
transition:all 0.5s ease-in-out 0s;
}
#holoLoader.active #thirdCircle:before {
content:'';
display:block;
width:100%;
height:100%;
position:absolute;
}
#holoLoader.active #thirdCircle:after {
content:'';
position:absolute;
display:block;
border-radius:180%;
width:100%;
height:100%;
}
#holoLoader.active #thirdCircle {
border:5px solid white;
opacity:1;
transform: translateX(-520px) translateY(-330px);
transition:all 0.5s ease-in-out 0.4s;
}
#fourthCircle {
position:absolute;
top:0px;
width:60%;
height:60%;
margin:20%;
}
#holoLoader.active #fourthCircle {
transform: translateX(-810px) translateY(-540px);
transition:all 0.5s ease-in-out 0.4s;
}
#fifthCircle {
position:absolute;
top:0px;
width:50%;
height:50%;
margin:25%;
animation: stutterMovement 5s infinite linear;
}
#holoLoader.active #fifthCircle {
transform: translateX(-600px) translateY(-400px);
transition:all 0.5s ease-in-out 0.4s;
}
#sixthCircle {
position:absolute;
top:0px;
width:40%;
height:40%;
margin:30%;
border:1px dashed var(--main-orange-color);
border-radius:180%;
}
#holoLoader.active #sixthCircle {
border:3px solid var(--main-white-color);
transition:all 0.5s ease-in-out 0.4s;
}
#holoLoader.active #sixthCircle:before {
position:absolute;
width:40%;
height:40%;
margin:30%;
top:-5px;
left:-5px;
border:1px dashed var(--main-white-color);
border-radius:180%;
transition: all 0.5s ease-in-out 0s;
animation: bubbleEffect 4s infinite linear;
box-shadow: 0px 0px 0px rgba(255,255,255,0);
}
#sixthCircle:before {
content:'';
position:absolute;
border-radius:180%;
width:20%;
display: block;
height:20%;
margin:40%;
top: -5px;
left: -5px;
border:1px solid var(--main-white-color);
box-shadow: 0px 0px 5px 2px rgba(214,107,24,1), inset 0 0px 5px rgba(214,107,24,1);
transition:all 0.5s ease-in-out 0.4s;
animation: rotationY 4s infinite linear;
}
#holoLoader.active #sixthCircle:after {
position:absolute;
width:40%;
height:40%;
margin:30%;
top:-5px;
left:-5px;
border:1px dashed var(--main-white-color);
border-radius:180%;
transition: all 0.5s ease-in-out 0s;
animation: bubbleEffect 4s infinite linear;
box-shadow: 0px 0px 0px rgba(255,255,255,0);
}
#sixthCircle:after {
content:'';
position:absolute;
display: block;
width:20%;
height:20%;
border-radius:180%;
margin:40%;
top: -5px;
left: -5px;
box-shadow: 0px 0px 5px 2px var(--main-orange-color), inset 0 0px 5px var(--main-orange-color);
border:1px solid var(--main-white-color);
transition:all 0.5s ease-in-out 0.4s;
animation: rotationX 8s infinite linear;
}
@keyframes rotationX {
0% {
transform:rotateX(0deg) rotateY(0deg) scale(1);
}
100% {
transform:rotateX(360deg) rotateY(-360deg) scale(1);
}
}
@keyframes rotationY {
0% {
transform:rotateY(0deg) rotateX(0deg) scale(1)
}
100% {
transform:rotateY(360deg) rotateX(360deg) scale(1)
}
}
@keyframes bubbleEffect {
0% {
animation-timing-function: linear;
transform:scale(1);
}
25% {
animation-timing-function: linear;
opacity:1;
transform:scale(1.2);
}
50% {
animation-timing-function: linear;
opacity:0.5;
transform:scale(1);
}
75% {
animation-timing-function: linear;
opacity:0.5;
transform:scale(0.8);
}
100%{
animation-timing-function: linear;
opacity:1;
transform:scale(1);
}
}
#shootingParticles {
opacity:0;
width: 470px;
height: 200px;
z-index:1;
position: absolute;
top: calc(50vh - 168px);
left: calc(50vw - 460px);
transform: rotateZ(18deg);
transition:all 0.5s linear 0.5s;
}
#shootingParticles.active {
transition:all 0.5s linear 1s;
opacity:1;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment