Thứ Bảy, 26 tháng 9, 2020

Nút tải về hiệu ứng đẹp
XEM BÀI VIÊT
TOÀN MÀN HÌNH

Bước 1: Chèn mã css vào trước </head>

<style>
:root{--dur:3s;--arrowA:polygon(33% 0%,67% 0%,67% 60%,100% 60%,50% 100%,0% 60%,33% 60%);--arrowB:polygon(0% 37.5%,100% 37.5%,100% 62.5%,100% 62.5%,50% 62.5%,0% 62.5%,0% 62.5%);font-size:calc(20px + (40 - 20)*(100vw - 320px)/(2560 - 320));}
button{background:#255ff4;border-radius:0.2em;color:#fff;cursor:pointer;display:flex;margin:auto;padding:0.5em 1em;position:relative;transition:background 0.15s linear;width:10.5em;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;}
button:focus{outline:transparent;}
button::-moz-focus-inner{border:0;}
button:not(:disabled):focus,button:not(:disabled):hover{background:#0b46da;}
button:not(:disabled):active{transform:translateY(1px);}
button:disabled{cursor:not-allowed;}
button span,button:before,button:after{display:inline-block;pointer-events:none;}
button:before,button:after{border-radius:0.25em;opacity:0;top:1em;left:1.3em;height:0.5em;transform-origin:0.25em 50%;z-index:2;}
button:before{transform:rotate(-180deg);width:0.8em;}
button:after{width:1.2em;}
button:before,button:after,.dl-icon:before,.dl-icon:after{content:"";display:block;position:absolute;}
button:before,button:after,.dl-icon:before{background:currentColor;}
button span + span{margin:auto;}
.dl-icon{margin-right:0.5em;position:relative;width:1.5em;height:1.5em;}
.dl-icon:before{clip-path:var(--arrowA);-webkit-clip-path:var(--arrowA);top:0;left:calc(50% - 0.55em);transform-origin:50% 100%;width:1.1em;height:1em;z-index:1;}
.dl-icon:after{background-image:linear-gradient(#0b46da,#0b46da);background-position:-1.5em 0;background-size:100% 100%;background-repeat:no-repeat;box-shadow:0.25em 0 0 inset,-0.25em 0 0 inset,0 -0.25em 0 inset;bottom:0;width:100%;height:0.5em;}
.dl-working:before{animation:checkOutA var(--dur) linear forwards;}
.dl-working:after{animation:checkOutB var(--dur) linear forwards;}
.dl-working .dl-icon{animation:impact var(--dur) linear forwards;}
.dl-working .dl-icon:before{animation:arrowToBar var(--dur) linear forwards;}
.dl-working .dl-icon:after{animation:trayToBar var(--dur) linear forwards;}
/* Animation */
@keyframes impact{from,15%{transform:translateY(0);}17.5%{transform:translateY(0.25em);}20%,to{transform:translateY(0);}}
@keyframes arrowToBar{from{clip-path:var(--arrowA);-webkit-clip-path:var(--arrowA);}10%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);transform:translateY(0);}15%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);transform:translateY(0.625em);}30%{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);opacity:1;transform:translateY(0.125em);}35%,to{clip-path:var(--arrowB);-webkit-clip-path:var(--arrowB);opacity:0;transform:translateY(0.125em);}}
@keyframes trayToBar{from,15%{background-color:transparent;border-radius:0;box-shadow:0.25em 0 0 inset,-0.25em 0 0 inset,0 -0.25em 0 inset;transform:translateY(0);}15.1%{background-color:currentColor;border-radius:0;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 0.1em inset;transform:translateY(0);}30%{background-color:currentColor;background-position:-1.5em 0;border-radius:0.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 0.1em inset;transform:translateY(-0.5em);}90%{background-color:currentColor;background-position:0 0;border-radius:0.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 0.1em inset;opacity:1;transform:translateY(-0.5em);}90.1%,to{background-color:currentColor;background-position:0 0;border-radius:0.25em;box-shadow:0 0 0 inset,0 0 0 inset,0 0 0 0.1em inset;opacity:0;transform:translateY(-0.5em);}}
@keyframes checkOutA{from,90%{opacity:0;transform:translate(0,0) rotate(-180deg);}90.1%{opacity:1;width:0.8em;transform:translate(0,0) rotate(-180deg);}92.5%{opacity:1;width:1em;transform:translate(0,0.5em) rotate(-120deg);}95%,to{opacity:1;width:1em;transform:translate(0,0.375em) rotate(-135deg);}}
@keyframes checkOutB{from,90%{opacity:0;transform:translate(0,0) rotate(0);}90.1%{opacity:1;width:1.2em;transform:translate(0,0) rotate(0);}92.5%{opacity:1;width:1.6em;transform:translate(0,0.5em) rotate(-60deg);}95%,to{opacity:1;width:1.6em;transform:translate(0,0.375em) rotate(-45deg);}}
/* Dark mode */
@media (prefers-color-scheme:dark){body{background:#2e3138;}}
</style>

Bước 2: chèn script trước thẻ đóng thẻ đóng </body>

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded",function(){
	this.addEventListener("click",e => {
		let tar = e.target;
		if (tar.hasAttribute("data-dl")) {
			let dlClass = "dl-working";
			if (!tar.classList.contains(dlClass)) {
				let lastSpan = tar.querySelector("span:last-child"),
					lastSpanText = lastSpan.textContent,
					timeout = getMSFromProperty("--dur",":root");

				tar.classList.add(dlClass);
				lastSpan.textContent = "Đang tải về";
				tar.disabled = true;

				setTimeout(() => {
					lastSpan.textContent = "Đã xong!";
				},timeout * 0.9);

				setTimeout(() => {
					tar.classList.remove(dlClass);
					lastSpan.textContent = lastSpanText;
					tar.disabled = false;
				},timeout + 1e3);
			}
		}
	});
});
function getMSFromProperty(property,selector) {
	let cs = window.getComputedStyle(document.querySelector(selector)),
		transDur = cs.getPropertyValue(property),
		msLabelPos = transDur.indexOf("ms"),
		sLabelPos = transDur.indexOf("s");

	if (msLabelPos > -1)
		return transDur.substr(0,msLabelPos);
	else if (sLabelPos > -1)
		return transDur.substr(0,sLabelPos) * 1e3;
}
//]]>
</script>

Bước 3: Chèn đoạn mã dưới đây vào nơi bạn cần hiển thị nút tải về trong theme

<button type="button" data-dl="">
<span class="dl-icon"></span><span>Tải về</span>
</button>
<button type="button" data-dl="">
<span class="dl-icon"></span><span>Tải về</span>
</button>

Thứ Sáu, 30 tháng 11, 2018

Hiệu ứng Canvas
XEM BÀI VIÊT
TOÀN MÀN HÌNH




Đầu tiên chèn CSS:
canvas { position: absolute; top: 0; left: 0; }

Tiếp đến là đoạn code dán vào nơi hiển thị:
<canvas id=c></canvas>
<script>
var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'), opts = { len: 20, count: 50, baseTime: 10, addedTime: 10, dieChance: .05, spawnChance: 1, sparkChance: .1, sparkDist: 10, sparkSize: 2, color: 'hsl(hue,100%,light%)', baseLight: 50, addedLight: 10, shadowToTimePropMult: 6, baseLightInputMultiplier: .01, addedLightInputMultiplier: .02, cx: w / 2, cy: h / 2, repaintAlpha: .04, hueChange: .1 }, tick = 0, lines = [], dieX = w / 2 / opts.len, dieY = h / 2 / opts.len, baseRad = Math.PI * 2 / 6; ctx.fillStyle = 'black'; ctx.fillRect(0, 0, w, h); function loop() { window.requestAnimationFrame(loop); ++tick; ctx.globalCompositeOperation = 'source-over'; ctx.shadowBlur = 0; ctx.fillStyle = 'rgba(0,0,0,alp)'.replace('alp', opts.repaintAlpha); ctx.fillRect(0, 0, w, h); ctx.globalCompositeOperation = 'lighter'; if (lines.length < opts.count && Math.random() < opts.spawnChance) lines.push(new Line); lines.map(function(line) { line.step() }) } function Line() { this.reset() } Line.prototype.reset = function() { this.x = 0; this.y = 0; this.addedX = 0; this.addedY = 0; this.rad = 0; this.lightInputMultiplier = opts.baseLightInputMultiplier + opts.addedLightInputMultiplier * Math.random(); this.color = opts.color.replace('hue', tick * opts.hueChange); this.cumulativeTime = 0; this.beginPhase() } Line.prototype.beginPhase = function() { this.x += this.addedX; this.y += this.addedY; this.time = 0; this.targetTime = (opts.baseTime + opts.addedTime * Math.random()) | 0; this.rad += baseRad * (Math.random() < .5 ? 1 : -1); this.addedX = Math.cos(this.rad); this.addedY = Math.sin(this.rad); if (Math.random() < opts.dieChance || this.x > dieX || this.x < -dieX || this.y > dieY || this.y < -dieY) this.reset() } Line.prototype.step = function() {++this.time; ++this.cumulativeTime; if (this.time >= this.targetTime) this.beginPhase(); var prop = this.time / this.targetTime, wave = Math.sin(prop * Math.PI / 2), x = this.addedX * wave, y = this.addedY * wave; ctx.shadowBlur = prop * opts.shadowToTimePropMult; ctx.fillStyle = ctx.shadowColor = this.color.replace('light', opts.baseLight + opts.addedLight * Math.sin(this.cumulativeTime * this.lightInputMultiplier)); ctx.fillRect(opts.cx + (this.x + x) * opts.len, opts.cy + (this.y + y) * opts.len, 2, 2); if (Math.random() < opts.sparkChance) ctx.fillRect(opts.cx + (this.x + x) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.cy + (this.y + y) * opts.len + Math.random() * opts.sparkDist * (Math.random() < .5 ? 1 : -1) - opts.sparkSize / 2, opts.sparkSize, opts.sparkSize) } loop(); window.addEventListener('resize', function() { w = c.width = window.innerWidth; h = c.height = window.innerHeight; ctx.fillStyle = 'black'; ctx.fillRect(0, 0, w, h); opts.cx = w / 2; opts.cy = h / 2; dieX = w / 2 / opts.len; dieY = h / 2 / opts.len });
</script>
Hiệu ứng Canvas
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Đầu tiên chèn CSS:
html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background: #000; }
#canvas { position: absolute; width: 100%; height: 100%; }

Tiếp đến là đoạn code dán vào nơi hiển thị:
<canvas id="canvas"></canvas>
<script>
function project3D(x,y,z,vars){var p,d;x-=vars.camX;y-=vars.camY-8;z-=vars.camZ;p=Math.atan2(x,z);d=Math.sqrt(x*x+z*z);x=Math.sin(p-vars.yaw)*d;z=Math.cos(p-vars.yaw)*d;p=Math.atan2(y,z);d=Math.sqrt(y*y+z*z);y=Math.sin(p-vars.pitch)*d;z=Math.cos(p-vars.pitch)*d;var rx1=-1000;var ry1=1;var rx2=1000;var ry2=1;var rx3=0;var ry3=0;var rx4=x;var ry4=z;var uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*(rx1-rx3))/uc;var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;if(!z)z=0.000000001;if(ua>0&&ua<1&&ub>0&&ub<1){return{x:vars.cx+(rx1+ua*(rx2-rx1))*vars.scale,y:vars.cy+y/z*vars.scale,d:(x*x+y*y+z*z)}}else{return{d:-1}}}function elevation(x,y,z){var dist=Math.sqrt(x*x+y*y+z*z);if(dist&&z/dist>=-1&&z/dist<=1)return Math.acos(z/dist);return 0.00000001}function rgb(col){col+=0.000001;var r=parseInt((0.5+Math.sin(col)*0.5)*16);var g=parseInt((0.5+Math.cos(col)*0.5)*16);var b=parseInt((0.5-Math.sin(col)*0.5)*16);return"#"+r.toString(16)+g.toString(16)+b.toString(16)}function interpolateColors(RGB1,RGB2,degree){var w2=degree;var w1=1-w2;return[w1*RGB1[0]+w2*RGB2[0],w1*RGB1[1]+w2*RGB2[1],w1*RGB1[2]+w2*RGB2[2]]}function rgbArray(col){col+=0.000001;var r=parseInt((0.5+Math.sin(col)*0.5)*256);var g=parseInt((0.5+Math.cos(col)*0.5)*256);var b=parseInt((0.5-Math.sin(col)*0.5)*256);return[r,g,b]}function colorString(arr){var r=parseInt(arr[0]);var g=parseInt(arr[1]);var b=parseInt(arr[2]);return"#"+("0"+r.toString(16)).slice(-2)+("0"+g.toString(16)).slice(-2)+("0"+b.toString(16)).slice(-2)}function process(vars){if(vars.points.length<vars.initParticles)for(var i=0;i<5;++i)spawnParticle(vars);var p,d,t;p=Math.atan2(vars.camX,vars.camZ);d=Math.sqrt(vars.camX*vars.camX+vars.camZ*vars.camZ);d-=Math.sin(vars.frameNo/80)/25;t=Math.cos(vars.frameNo/300)/165;vars.camX=Math.sin(p+t)*d;vars.camZ=Math.cos(p+t)*d;vars.camY=-Math.sin(vars.frameNo/220)*15;vars.yaw=Math.PI+p+t;vars.pitch=elevation(vars.camX,vars.camZ,vars.camY)-Math.PI/2;var t;for(var i=0;i<vars.points.length;++i){x=vars.points[i].x;y=vars.points[i].y;z=vars.points[i].z;d=Math.sqrt(x*x+z*z)/1.0075;t=.1/(1+d*d/5);p=Math.atan2(x,z)+t;vars.points[i].x=Math.sin(p)*d;vars.points[i].z=Math.cos(p)*d;vars.points[i].y+=vars.points[i].vy*t*((Math.sqrt(vars.distributionRadius)-d)*2);if(vars.points[i].y>vars.vortexHeight/2||d<.25){vars.points.splice(i,1);spawnParticle(vars)}}}function drawFloor(vars){var x,y,z,d,point,a;for(var i=-25;i<=25;i+=1){for(var j=-25;j<=25;j+=1){x=i*2;z=j*2;y=vars.floor;d=Math.sqrt(x*x+z*z);point=project3D(x,y-d*d/85,z,vars);if(point.d!=-1){size=1+15000/(1+point.d);a=0.15-Math.pow(d/50,4)*0.15;if(a>0){vars.ctx.fillStyle=colorString(interpolateColors(rgbArray(d/26-vars.frameNo/40),[0,128,32],.5+Math.sin(d/6-vars.frameNo/8)/2));vars.ctx.globalAlpha=a;vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)}}}}vars.ctx.fillStyle="#82f";for(var i=-25;i<=25;i+=1){for(var j=-25;j<=25;j+=1){x=i*2;z=j*2;y=-vars.floor;d=Math.sqrt(x*x+z*z);point=project3D(x,y+d*d/85,z,vars);if(point.d!=-1){size=1+15000/(1+point.d);a=0.15-Math.pow(d/50,4)*0.15;if(a>0){vars.ctx.fillStyle=colorString(interpolateColors(rgbArray(-d/26-vars.frameNo/40),[32,0,128],.5+Math.sin(-d/6-vars.frameNo/8)/2));vars.ctx.globalAlpha=a;vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)}}}}}function sortFunction(a,b){return b.dist-a.dist}function draw(vars){vars.ctx.globalAlpha=.15;vars.ctx.fillStyle="#000";vars.ctx.fillRect(0,0,canvas.width,canvas.height);drawFloor(vars);var point,x,y,z,a;for(var i=0;i<vars.points.length;++i){x=vars.points[i].x;y=vars.points[i].y;z=vars.points[i].z;point=project3D(x,y,z,vars);if(point.d!=-1){vars.points[i].dist=point.d;size=1+vars.points[i].radius/(1+point.d);d=Math.abs(vars.points[i].y);a=.8-Math.pow(d/(vars.vortexHeight/2),1000)*.8;vars.ctx.globalAlpha=a>=0&&a<=1?a:0;vars.ctx.fillStyle=rgb(vars.points[i].color);if(point.x>-1&&point.x<vars.canvas.width&&point.y>-1&&point.y<vars.canvas.height)vars.ctx.fillRect(point.x-size/2,point.y-size/2,size,size)}}vars.points.sort(sortFunction)}function spawnParticle(vars){var p,ls;pt={};p=Math.PI*2*Math.random();ls=Math.sqrt(Math.random()*vars.distributionRadius);pt.x=Math.sin(p)*ls;pt.y=-vars.vortexHeight/2;pt.vy=vars.initV/20+Math.random()*vars.initV;pt.z=Math.cos(p)*ls;pt.radius=200+800*Math.random();pt.color=pt.radius/1000+vars.frameNo/250;vars.points.push(pt)}function frame(vars){if(vars===undefined){var vars={};vars.canvas=document.querySelector("canvas");vars.ctx=vars.canvas.getContext("2d");vars.canvas.width=document.body.clientWidth;vars.canvas.height=document.body.clientHeight;window.addEventListener("resize",function(){vars.canvas.width=document.body.clientWidth;vars.canvas.height=document.body.clientHeight;vars.cx=vars.canvas.width/2;vars.cy=vars.canvas.height/2},true);vars.frameNo=0;vars.camX=0;vars.camY=0;vars.camZ=-14;vars.pitch=elevation(vars.camX,vars.camZ,vars.camY)-Math.PI/2;vars.yaw=0;vars.cx=vars.canvas.width/2;vars.cy=vars.canvas.height/2;vars.bounding=10;vars.scale=500;vars.floor=26.5;vars.points=[];vars.initParticles=1000;vars.initV=.01;vars.distributionRadius=800;vars.vortexHeight=25}vars.frameNo++;requestAnimationFrame(function(){frame(vars)});process(vars);draw(vars)}frame();
</script>

Thứ Ba, 30 tháng 10, 2018

Thứ Hai, 15 tháng 10, 2018

Thứ Bảy, 4 tháng 8, 2018

Code Trang 404 Hiệu Ứng Đẹp
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Demo

CSS:

@import url("https://fonts.googleapis.com/css?family=Lato|Russo+One");

.container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.container-star {
  background-image: linear-gradient(to bottom, #292256 0%, #8446cf 70%, #a871d6 100%);
}
.container-star:after {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(15, 10, 38, 0.2) 100%);
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.star-1 {
  position: absolute;
  border-radius: 50%;
  background-color: #ffffff;
  -webkit-animation: twinkle 5s infinite ease-in-out;
          animation: twinkle 5s infinite ease-in-out;
}
.star-1:after {
  height: 100%;
  width: 100%;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  content: "";
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
}
.star-1:before {
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  border-radius: 50%;
  content: "";
  top: -20%;
  left: -50%;
}

.star-1:nth-of-type(1) {
  top: 78vh;
  left: 44vw;
  width: 9px;
  height: 3px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(1):before {
  width: 18px;
  height: 18px;
  top: -250%;
}

.star-1:nth-of-type(2) {
  top: 94vh;
  left: 67vw;
  width: 6px;
  height: 2px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-1:nth-of-type(2):before {
  width: 12px;
  height: 12px;
  top: -250%;
}

.star-1:nth-of-type(3) {
  top: 41vh;
  left: 66vw;
  width: 6px;
  height: 2px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-1:nth-of-type(3):before {
  width: 12px;
  height: 12px;
  top: -250%;
}

.star-1:nth-of-type(4) {
  top: 72vh;
  left: 77vw;
  width: 9px;
  height: 3px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-1:nth-of-type(4):before {
  width: 18px;
  height: 18px;
  top: -250%;
}

.star-1:nth-of-type(5) {
  top: 14vh;
  left: 68vw;
  width: 9px;
  height: 3px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(5):before {
  width: 18px;
  height: 18px;
  top: -250%;
}

.star-1:nth-of-type(6) {
  top: 26vh;
  left: 79vw;
  width: 6px;
  height: 2px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(6):before {
  width: 12px;
  height: 12px;
  top: -250%;
}

.star-1:nth-of-type(7) {
  top: 28vh;
  left: 84vw;
  width: 9px;
  height: 3px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-1:nth-of-type(7):before {
  width: 18px;
  height: 18px;
  top: -250%;
}

.star-1:nth-of-type(8) {
  top: 42vh;
  left: 28vw;
  width: 4px;
  height: 1.3333333333px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-1:nth-of-type(8):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-1:nth-of-type(9) {
  top: 7vh;
  left: 99vw;
  width: 7px;
  height: 2.3333333333px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-1:nth-of-type(9):before {
  width: 14px;
  height: 14px;
  top: -250%;
}

.star-1:nth-of-type(10) {
  top: 97vh;
  left: 76vw;
  width: 4px;
  height: 1.3333333333px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-1:nth-of-type(10):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-1:nth-of-type(11) {
  top: 76vh;
  left: 89vw;
  width: 9px;
  height: 3px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(11):before {
  width: 18px;
  height: 18px;
  top: -250%;
}

.star-1:nth-of-type(12) {
  top: 16vh;
  left: 92vw;
  width: 8px;
  height: 2.6666666667px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-1:nth-of-type(12):before {
  width: 16px;
  height: 16px;
  top: -250%;
}

.star-1:nth-of-type(13) {
  top: 78vh;
  left: 33vw;
  width: 6px;
  height: 2px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(13):before {
  width: 12px;
  height: 12px;
  top: -250%;
}

.star-1:nth-of-type(14) {
  top: 12vh;
  left: 67vw;
  width: 7px;
  height: 2.3333333333px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.star-1:nth-of-type(14):before {
  width: 14px;
  height: 14px;
  top: -250%;
}

.star-1:nth-of-type(15) {
  top: 64vh;
  left: 51vw;
  width: 4px;
  height: 1.3333333333px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(15):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-1:nth-of-type(16) {
  top: 71vh;
  left: 95vw;
  width: 4px;
  height: 1.3333333333px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(16):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-1:nth-of-type(17) {
  top: 56vh;
  left: 31vw;
  width: 7px;
  height: 2.3333333333px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-1:nth-of-type(17):before {
  width: 14px;
  height: 14px;
  top: -250%;
}

.star-1:nth-of-type(18) {
  top: 33vh;
  left: 80vw;
  width: 6px;
  height: 2px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.star-1:nth-of-type(18):before {
  width: 12px;
  height: 12px;
  top: -250%;
}

.star-1:nth-of-type(19) {
  top: 30vh;
  left: 14vw;
  width: 8px;
  height: 2.6666666667px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.star-1:nth-of-type(19):before {
  width: 16px;
  height: 16px;
  top: -250%;
}

.star-1:nth-of-type(20) {
  top: 53vh;
  left: 43vw;
  width: 6px;
  height: 2px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-1:nth-of-type(20):before {
  width: 12px;
  height: 12px;
  top: -250%;
}

.star-1:nth-of-type(21) {
  top: 32vh;
  left: 9vw;
  width: 7px;
  height: 2.3333333333px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-1:nth-of-type(21):before {
  width: 14px;
  height: 14px;
  top: -250%;
}

.star-1:nth-of-type(22) {
  top: 97vh;
  left: 9vw;
  width: 5px;
  height: 1.6666666667px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-1:nth-of-type(22):before {
  width: 10px;
  height: 10px;
  top: -250%;
}

.star-1:nth-of-type(23) {
  top: 62vh;
  left: 6vw;
  width: 5px;
  height: 1.6666666667px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(23):before {
  width: 10px;
  height: 10px;
  top: -250%;
}

.star-1:nth-of-type(24) {
  top: 57vh;
  left: 13vw;
  width: 9px;
  height: 3px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-1:nth-of-type(24):before {
  width: 18px;
  height: 18px;
  top: -250%;
}

.star-1:nth-of-type(25) {
  top: 52vh;
  left: 60vw;
  width: 4px;
  height: 1.3333333333px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.star-1:nth-of-type(25):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-1:nth-of-type(26) {
  top: 5vh;
  left: 84vw;
  width: 5px;
  height: 1.6666666667px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-1:nth-of-type(26):before {
  width: 10px;
  height: 10px;
  top: -250%;
}

.star-1:nth-of-type(27) {
  top: 26vh;
  left: 23vw;
  width: 8px;
  height: 2.6666666667px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.star-1:nth-of-type(27):before {
  width: 16px;
  height: 16px;
  top: -250%;
}

.star-1:nth-of-type(28) {
  top: 34vh;
  left: 3vw;
  width: 4px;
  height: 1.3333333333px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(28):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-1:nth-of-type(29) {
  top: 40vh;
  left: 58vw;
  width: 6px;
  height: 2px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-1:nth-of-type(29):before {
  width: 12px;
  height: 12px;
  top: -250%;
}

.star-1:nth-of-type(30) {
  top: 17vh;
  left: 55vw;
  width: 5px;
  height: 1.6666666667px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.star-1:nth-of-type(30):before {
  width: 10px;
  height: 10px;
  top: -250%;
}

.star-2 {
  position: absolute;
  border-radius: 50%;
  background-color: #ffffff;
  -webkit-animation: twinkle 5s infinite ease-in-out;
          animation: twinkle 5s infinite ease-in-out;
}

.star-2:nth-of-type(31) {
  top: 70vh;
  left: 96vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(31):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.star-2:nth-of-type(32) {
  top: 88vh;
  left: 57vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-2:nth-of-type(32):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(33) {
  top: 59vh;
  left: 48vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(33):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(34) {
  top: 2vh;
  left: 83vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(34):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.star-2:nth-of-type(35) {
  top: 8vh;
  left: 75vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-2:nth-of-type(35):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(36) {
  top: 78vh;
  left: 8vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-2:nth-of-type(36):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(37) {
  top: 72vh;
  left: 98vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(37):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.star-2:nth-of-type(38) {
  top: 34vh;
  left: 41vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.star-2:nth-of-type(38):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(39) {
  top: 13vh;
  left: 5vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(39):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(40) {
  top: 5vh;
  left: 86vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-2:nth-of-type(40):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.star-2:nth-of-type(41) {
  top: 7vh;
  left: 62vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(41):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(42) {
  top: 36vh;
  left: 44vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(42):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.star-2:nth-of-type(43) {
  top: 74vh;
  left: 47vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-2:nth-of-type(43):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(44) {
  top: 72vh;
  left: 86vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-2:nth-of-type(44):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.star-2:nth-of-type(45) {
  top: 26vh;
  left: 40vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(45):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(46) {
  top: 41vh;
  left: 39vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(46):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(47) {
  top: 16vh;
  left: 36vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-2:nth-of-type(47):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(48) {
  top: 96vh;
  left: 37vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-2:nth-of-type(48):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(49) {
  top: 18vh;
  left: 8vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-2:nth-of-type(49):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(50) {
  top: 56vh;
  left: 31vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 4s;
          animation-delay: 4s;
}
.star-2:nth-of-type(50):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(51) {
  top: 24vh;
  left: 69vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-2:nth-of-type(51):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(52) {
  top: 52vh;
  left: 17vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-2:nth-of-type(52):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(53) {
  top: 35vh;
  left: 59vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-2:nth-of-type(53):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.star-2:nth-of-type(54) {
  top: 46vh;
  left: 73vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(54):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(55) {
  top: 38vh;
  left: 35vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-2:nth-of-type(55):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(56) {
  top: 34vh;
  left: 66vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.star-2:nth-of-type(56):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(57) {
  top: 80vh;
  left: 76vw;
  width: 3px;
  height: 3px;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.star-2:nth-of-type(57):before {
  width: 6px;
  height: 6px;
  top: -250%;
}

.star-2:nth-of-type(58) {
  top: 45vh;
  left: 49vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-2:nth-of-type(58):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.star-2:nth-of-type(59) {
  top: 8vh;
  left: 4vw;
  width: 4px;
  height: 4px;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}
.star-2:nth-of-type(59):before {
  width: 8px;
  height: 8px;
  top: -250%;
}

.star-2:nth-of-type(60) {
  top: 71vh;
  left: 93vw;
  width: 2px;
  height: 2px;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
}
.star-2:nth-of-type(60):before {
  width: 4px;
  height: 4px;
  top: -250%;
}

.container-title {
  width: 600px;
  height: 450px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: absolute;
  color: white;
  line-height: 1;
  font-weight: 700;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  display: flex;
}

.title > * {
  display: inline-block;
  font-size: 200px;
}

.number {
  text-shadow: 20px 20px 20px rgba(0, 0, 0, 0.2);
  padding: 0 0.2em;
  font-family: 'Russo One', sans-serif;
}

.subtitle {
  font-size: 25px;
  margin-top: 1.5em;
  font-family: "Lato", sans-serif;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

button {
  font-size: 22px;
  margin-top: 1.5em;
  padding: 0.5em 1em;
  letter-spacing: 1px;
  font-family: "Lato", sans-serif;
  color: white;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  z-index: 999;
  border: 2px solid white;
  border-radius: 5px;
  text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease;
}
button:hover {
  opacity: 0.7;
}
button:focus {
  outline: 0;
}

.moon {
  position: relative;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  z-index: 2;
  background-color: #fff;
  box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #fff, 0 0 70px #fff, 0 0 80px #fff, 0 0 100px #ff1177;
  -webkit-animation: rotate 5s ease-in-out infinite;
          animation: rotate 5s ease-in-out infinite;
}
.moon .face {
  top: 60%;
  left: 47%;
  position: absolute;
}
.moon .face .mouth {
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #5c3191;
  width: 25px;
  height: 25px;
  position: absolute;
  -webkit-animation: snore 5s ease-in-out infinite;
          animation: snore 5s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  box-shadow: inset -4px -4px 4px rgba(0, 0, 0, 0.3);
}
.moon .face .eyes {
  position: absolute;
  top: -30px;
  left: -30px;
}
.moon .face .eyes .eye-left,
.moon .face .eyes .eye-right {
  border: 4px solid #5c3191;
  width: 30px;
  height: 15px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-top: 0;
  position: absolute;
}
.moon .face .eyes .eye-left:before, .moon .face .eyes .eye-left:after,
.moon .face .eyes .eye-right:before,
.moon .face .eyes .eye-right:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 4px;
  height: 4px;
  background-color: #5c3191;
  top: -2px;
  left: -4px;
}
.moon .face .eyes .eye-left:after,
.moon .face .eyes .eye-right:after {
  left: auto;
  right: -4px;
}
.moon .face .eyes .eye-right {
  left: 50px;
}

.container-bird {
  -webkit-perspective: 2000px;
          perspective: 2000px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.bird {
  position: absolute;
  z-index: 1000;
  left: 50%;
  top: 50%;
  height: 40px;
  width: 50px;
  -webkit-transform: translate3d(-100vw, 0, 0) rotateY(90deg);
          transform: translate3d(-100vw, 0, 0) rotateY(90deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}

.bird-container {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translate3d(50px, 30px, -300px);
          transform: translate3d(50px, 30px, -300px);
}

.wing {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  z-index: 300;
}

.wing-left {
  background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
  -webkit-transform: translate3d(0, 0, 0) rotateX(-30deg);
          transform: translate3d(0, 0, 0) rotateX(-30deg);
  -webkit-animation: wingLeft 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
          animation: wingLeft 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}

.wing-right {
  background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
  -webkit-transform: translate3d(0, 0, 0) rotateX(-30deg);
          transform: translate3d(0, 0, 0) rotateX(-30deg);
  -webkit-animation: wingRight 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
          animation: wingRight 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}

.wing-right-top,
.wing-left-top {
  border-right: 25px solid transparent;
  border-left: 25px solid transparent;
  top: -20px;
  width: 100%;
  position: absolute;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
}

.wing-right-top {
  border-bottom: 20px solid #b8a5d1;
  -webkit-transform: translate3d(0, 0, 0) rotateX(60deg);
          transform: translate3d(0, 0, 0) rotateX(60deg);
  -webkit-animation: wingRightTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
          animation: wingRightTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}

.wing-left-top {
  border-bottom: 20px solid #7979a8;
  -webkit-transform: translate3d(0, 0, 0) rotateX(-60deg);
          transform: translate3d(0, 0, 0) rotateX(-60deg);
  -webkit-animation: wingLeftTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
          animation: wingLeftTop 1.3s cubic-bezier(0.45, 0, 0.5, 0.95) infinite;
}

.bird-anim:nth-child(1) {
  -webkit-animation: bird1 30s linear infinite forwards;
          animation: bird1 30s linear infinite forwards;
}

.bird-anim:nth-child(2) {
  -webkit-animation: bird2 30s linear infinite forwards;
          animation: bird2 30s linear infinite forwards;
  -webkit-animation-delay: 3s;
          animation-delay: 3s;
  z-index: -1;
}

.bird-anim:nth-child(3) {
  -webkit-animation: bird3 30s linear infinite forwards;
          animation: bird3 30s linear infinite forwards;
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}

.bird-anim:nth-child(4) {
  -webkit-animation: bird4 30s linear infinite forwards;
          animation: bird4 30s linear infinite forwards;
  -webkit-animation-delay: 7s;
          animation-delay: 7s;
}

.bird-anim:nth-child(5) {
  -webkit-animation: bird5 30s linear infinite forwards;
          animation: bird5 30s linear infinite forwards;
  -webkit-animation-delay: 14s;
          animation-delay: 14s;
}

.bird-anim:nth-child(6) {
  -webkit-animation: bird6 30s linear infinite forwards;
          animation: bird6 30s linear infinite forwards;
  -webkit-animation-delay: 10s;
          animation-delay: 10s;
  z-index: -1;
}

@-webkit-keyframes rotate {
  0%, 100% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes rotate {
  0%, 100% {
    -webkit-transform: rotate(-8deg);
            transform: rotate(-8deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes snore {
  0%, 100% {
    -webkit-transform: scale(1) rotate(30deg);
            transform: scale(1) rotate(30deg);
  }
  50% {
    -webkit-transform: scale(0.5) rotate(30deg);
            transform: scale(0.5) rotate(30deg);
    border-bottom-left-radius: 50%;
  }
}
@keyframes snore {
  0%, 100% {
    -webkit-transform: scale(1) rotate(30deg);
            transform: scale(1) rotate(30deg);
  }
  50% {
    -webkit-transform: scale(0.5) rotate(30deg);
            transform: scale(0.5) rotate(30deg);
    border-bottom-left-radius: 50%;
  }
}
@-webkit-keyframes twinkle {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
}
@keyframes twinkle {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.3;
  }
}
@-webkit-keyframes wingLeft {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(-50deg);
            transform: translate3d(0, 0, 0) rotateX(-50deg);
  }
  50% {
    -webkit-transform: translate3d(0, -20px, 0) rotateX(-130deg);
            transform: translate3d(0, -20px, 0) rotateX(-130deg);
    background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
  }
}
@keyframes wingLeft {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(-50deg);
            transform: translate3d(0, 0, 0) rotateX(-50deg);
  }
  50% {
    -webkit-transform: translate3d(0, -20px, 0) rotateX(-130deg);
            transform: translate3d(0, -20px, 0) rotateX(-130deg);
    background: linear-gradient(to bottom, #d9d3e2 0%, #b8a5d1 100%);
  }
}
@-webkit-keyframes wingLeftTop {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(-10deg);
            transform: translate3d(0, 0, 0) rotateX(-10deg);
  }
  50% {
    -webkit-transform: translate3d(0px, 0px, 0) rotateX(-40deg);
            transform: translate3d(0px, 0px, 0) rotateX(-40deg);
    border-bottom: 20px solid #b8a5d1;
  }
}
@keyframes wingLeftTop {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(-10deg);
            transform: translate3d(0, 0, 0) rotateX(-10deg);
  }
  50% {
    -webkit-transform: translate3d(0px, 0px, 0) rotateX(-40deg);
            transform: translate3d(0px, 0px, 0) rotateX(-40deg);
    border-bottom: 20px solid #b8a5d1;
  }
}
@-webkit-keyframes wingRight {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(50deg);
            transform: translate3d(0, 0, 0) rotateX(50deg);
  }
  50% {
    -webkit-transform: translate3d(0, -20px, 0) rotateX(130deg);
            transform: translate3d(0, -20px, 0) rotateX(130deg);
    background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
  }
}
@keyframes wingRight {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(50deg);
            transform: translate3d(0, 0, 0) rotateX(50deg);
  }
  50% {
    -webkit-transform: translate3d(0, -20px, 0) rotateX(130deg);
            transform: translate3d(0, -20px, 0) rotateX(130deg);
    background: linear-gradient(to bottom, #a58dc4 0%, #7979a8 100%);
  }
}
@-webkit-keyframes wingRightTop {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(10deg);
            transform: translate3d(0, 0, 0) rotateX(10deg);
  }
  50% {
    -webkit-transform: translate3d(0px, 0px, 0px) rotateX(40deg);
            transform: translate3d(0px, 0px, 0px) rotateX(40deg);
    border-bottom: 20px solid #7979a8;
  }
}
@keyframes wingRightTop {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0) rotateX(10deg);
            transform: translate3d(0, 0, 0) rotateX(10deg);
  }
  50% {
    -webkit-transform: translate3d(0px, 0px, 0px) rotateX(40deg);
            transform: translate3d(0px, 0px, 0px) rotateX(40deg);
    border-bottom: 20px solid #7979a8;
  }
}
@-webkit-keyframes bird1 {
  0% {
    -webkit-transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
            transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
  }
  100% {
    -webkit-transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
            transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
  }
}
@keyframes bird1 {
  0% {
    -webkit-transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
            transform: translate3d(-120vw, -20px, -1000px) rotateY(-40deg) rotateX(0deg);
  }
  100% {
    -webkit-transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
            transform: translate3d(100vw, -40vh, 1000px) rotateY(-40deg) rotateX(0deg);
  }
}
@-webkit-keyframes bird2 {
  0%,
	15% {
    -webkit-transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
            transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
  }
  100% {
    -webkit-transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
            transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
  }
}
@keyframes bird2 {
  0%,
	15% {
    -webkit-transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
            transform: translate3d(100vw, -300px, -1000px) rotateY(10deg) rotateX(0deg);
  }
  100% {
    -webkit-transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
            transform: translate3d(-100vw, -20px, -1000px) rotateY(10deg) rotateX(0deg);
  }
}
@-webkit-keyframes bird3 {
  0% {
    -webkit-transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
            transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
  }
  100% {
    -webkit-transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
            transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
  }
}
@keyframes bird3 {
  0% {
    -webkit-transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
            transform: translate3d(100vw, -50vh, 100px) rotateY(-5deg) rotateX(-20deg);
  }
  100% {
    -webkit-transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
            transform: translate3d(-100vw, -10vh, 100px) rotateY(-5deg) rotateX(-20deg);
  }
}
@-webkit-keyframes bird4 {
  0% {
    -webkit-transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
            transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
  }
  100% {
    -webkit-transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
            transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
  }
}
@keyframes bird4 {
  0% {
    -webkit-transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
            transform: translate3d(100vw, 30vh, 200px) rotateY(-5deg) rotateX(10deg);
  }
  100% {
    -webkit-transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
            transform: translate3d(-100vw, -30vh, 200px) rotateY(-5deg) rotateX(10deg);
  }
}
@-webkit-keyframes bird5 {
  0%,
	5% {
    -webkit-transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
            transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
  }
  100% {
    -webkit-transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
            transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
  }
}
@keyframes bird5 {
  0%,
	5% {
    -webkit-transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
            transform: translate3d(100vw, 30vh, 400px) rotateY(-15deg) rotateX(-10deg);
  }
  100% {
    -webkit-transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
            transform: translate3d(-100vw, 10vh, 400px) rotateY(-15deg) rotateX(-10deg);
  }
}
@-webkit-keyframes bird6 {
  0%, 10% {
    -webkit-transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
            transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
  }
  100% {
    -webkit-transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
            transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
  }
}
@keyframes bird6 {
  0%, 10% {
    -webkit-transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
            transform: translate3d(-100vw, 20vh, -500px) rotateY(15deg) rotateX(10deg);
  }
  100% {
    -webkit-transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
            transform: translate3d(100vw, 40vh, -800px) rotateY(5deg) rotateX(10deg);
  }
}
@media screen and (max-width: 580px) {
  .container-404 {
    width: 100%;
  }

  .number {
    font-size: 100px;
  }

  .subtitle {
    font-size: 20px;
    padding: 0 1em;
  }

  .moon {
    width: 100px;
    height: 100px;
  }

  .face {
    -webkit-transform: scale(0.7);
            transform: scale(0.7);
  }
}

Code Trang 404:
<div class="container container-star">
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-1"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
  <div class="star-2"></div>
</div>
<div class="container container-bird">
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="bird bird-anim">
    <div class="bird-container">
      <div class="wing wing-left">
        <div class="wing-left-top"></div>
      </div>
      <div class="wing wing-right">
        <div class="wing-right-top"></div>
      </div>
    </div>
  </div>
  <div class="container-title">
    <div class="title">
      <div class="number">4</div>
      <div class="moon">
        <div class="face">
          <div class="mouth"></div>
          <div class="eyes">
            <div class="eye-left"></div>
            <div class="eye-right"></div>
          </div>
        </div>
      </div>
      <div class="number">4</div>
    </div>
    <div class="subtitle">Page Not Found</div>
    <button>Trang Chủ</button>
  </div>
</div>

Chủ Nhật, 8 tháng 7, 2018

CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh Kinh
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Demo

Chèn CSS dưới vào:
* {
  padding: 0;
  margin: 0;
  list-style: none;
 }
 html,body {
  height: 100%;
 }
 .main {
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
  background-size: cover;
  overflow: hidden;
  position: relative;
 }
 .main ul {
  height: 100%;
  width: 3920px;
  position: absolute;
  top: 0;
  left: 0;
  animation: dong 50s linear infinite;
 }
 @keyframes dong {
  0% {
   left: 0;
  }
  100% {
   left: 1920px;
  }
 }
 .main ul li {
  height: 100%;
  width: 100%;
  background: url(https://3.bp.blogspot.com/-BnxY-vUVNh0/W0IUOKmRfNI/AAAAAAAAB5U/StJqZg2Sf0QHF4YYVmgQIVGljFngVVyZQCLcBGAs/s1600/2.jpg);
  float: left;
  margin-left: -2000px;
 }
 .wk {
  z-index: 999;
  width: 200px;
  height: 180px;
  background: url(https://4.bp.blogspot.com/-MA3-MbowsV0/W0IUOZGnNtI/AAAAAAAAB5c/jPDCp9En5acgz6RxrN7IKV_SwZTt0RcwACLcBGAs/s1600/west_01_3ca39fe.png) 0 0 no-repeat;
  /*margin: 400px auto;*/
  position: absolute;
  top: 55%;
  left: 20%;
  animation: wkzou 1s steps(8) infinite;
 }
 @keyframes wkzou {
  to {
   background-position: -1600px 0;
  }
 }
 .bj {
  z-index: 999;
  width: 200px;
  height: 180px;
  background: url(https://4.bp.blogspot.com/-qE0WLZXGiT0/W0IUOVmt8kI/AAAAAAAAB5Y/xSKEKhf3DFsN5ULaF6-m3r9_ibT_O9k9ACLcBGAs/s1600/west_02_47bad19.png) 0 0 no-repeat;
  /*margin: 400px auto;*/
  position: absolute;
  top: 55%;
  left: 35%;
  animation: bjzou 1s steps(8) infinite;
 }
 @keyframes bjzou {
  to {
   background-position: -1600px 0;
  }
 }
 .ts {
  z-index: 999;
  width: 170px;
  height: 240px;
  background: url(https://4.bp.blogspot.com/-8Mpf1w1hOYA/W0IUOlkT6PI/AAAAAAAAB5g/NoczSASgOBIbIR__w38a2Ch_TfDsAmHMwCLcBGAs/s1600/west_03_f962447.png) 0 0 no-repeat;
  /*margin: 400px auto;*/
  position: absolute;
  top: 50%;
  left: 50%;
  animation: tszou 1s steps(8) infinite;
 }
 @keyframes tszou {
  to {
   background-position: -1360px 0;
  }
 }
 .ss {
  z-index: 999;
  width: 210px;
  height: 200px;
  background: url(https://2.bp.blogspot.com/-MXtptJ7dpJU/W0IVNbSy5yI/AAAAAAAAB50/RCIJE1ubQkYzmGiBCaxJu_0bcgirXz3fwCLcBGAs/s3200/west_04_6516d80.png) 0 0 no-repeat;
  /*margin: 400px auto;*/
  position: absolute;
  top: 57%;
  left: 62%;
  animation: sszou 1s steps(8) infinite;
 }
 @keyframes sszou {
  to {
   background-position: -1680px 0;
  }
 }


Tiếp đó là đoạn code hiển thị:
<div class="wk"></div>
<div class="bj"></div>
<div class="ts"></div>
<div class="ss"></div>
<div class="main">
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

Thứ Bảy, 30 tháng 6, 2018

Tổng hợp 8 CSS Hiệu ứng Loading
XEM BÀI VIÊT
TOÀN MÀN HÌNH


Demo


Đầu tiên chèn đoạn mã dưới vào nơi hiển thị hiệu ứng loading:

<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner1"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner2"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner3"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner4"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner5"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner6"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner7"></div>
  </div>
</div>
<div class="cell">
  <div class="wrapper">
    <div class="spinner spinner8"></div>
  </div>
</div>

Cuối cùng là chèn đoạn css bên dưới vào là hoàn tất:
@import url("https://fonts.googleapis.com/css?family=Source+Serif+Pro");
*, *::before, *::after {
  box-sizing: border-box;
}

.cell {
  width: 25%;
}
.cell .wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  height: 10rem;
  margin: 1rem 1rem 0;
  padding-top: 2.2rem;
  background: rgba(255, 255, 255, 0.2);
}
.cell .wrapper::after {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0.2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.25);
  /* Increment the section counter */
  counter-increment: spinnerCount;
  /* Display the counter on pseudo-elements */
  content: counter(spinnerCount);
}

.spinner {
  width: 4rem;
  height: 4rem;
}
.spinner.spinner1 {
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-top-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  -webkit-animation: rotation .8s ease infinite;
          animation: rotation .8s ease infinite;
}
.spinner.spinner2 {
  border: 3px solid transparent;
  border-top-color: rgba(0, 0, 0, 0.5);
  border-bottom-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  -webkit-animation: rotation .8s ease infinite;
          animation: rotation .8s ease infinite;
}
.spinner.spinner3 {
  border-top: 3px solid rgba(0, 0, 0, 0.5);
  border-right: 3px solid transparent;
  border-radius: 50%;
  -webkit-animation: rotation .8s linear infinite;
          animation: rotation .8s linear infinite;
}
.spinner.spinner4 {
  background: rgba(0, 0, 0, 0.5);
  -webkit-animation: flip 1.2s ease infinite;
          animation: flip 1.2s ease infinite;
}
.spinner.spinner5 {
  margin-top: 2rem;
  overflow: hidden;
  position: relative;
  height: .5rem;
  background: rgba(255, 255, 255, 0.25);
}
.spinner.spinner5::before {
  content: '';
  position: absolute;
  left: -130%;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-animation: progress 4s linear infinite;
          animation: progress 4s linear infinite;
}
.spinner.spinner6 {
  position: absolute;
  top: 45%;
  left: 50%;
  background: #fff;
  border-radius: 50%;
  -webkit-animation: pulse 1s ease-in-out infinite;
          animation: pulse 1s ease-in-out infinite;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.spinner.spinner7 {
  position: relative;
}
.spinner.spinner7::before, .spinner.spinner7::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.spinner.spinner7::before {
  background: #fff;
  -webkit-animation: pulse2 2s ease-in-out infinite;
          animation: pulse2 2s ease-in-out infinite;
}
.spinner.spinner7::after {
  background: #fff;
  -webkit-animation: pulse2 2s 1s ease-in-out infinite;
          animation: pulse2 2s 1s ease-in-out infinite;
}
.spinner.spinner8 {
  position: relative;
  -webkit-perspective: 200px;
          perspective: 200px;
}
.spinner.spinner8::before {
  display: block;
  content: '';
  width: 50%;
  height: 50%;
  background: rgba(0, 0, 0, 0.5);
  -webkit-animation: 2s flipWalker ease infinite;
          animation: 2s flipWalker ease infinite;
}

@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes flip {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}
@keyframes flip {
  0% {
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
            transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  100% {
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
            transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
}
@-webkit-keyframes progress {
  0% {
    left: -130%;
    background: rgba(0, 0, 0, 0.5);
  }
  50% {
    left: 130%;
    background: rgba(0, 0, 0, 0.5);
  }
  51% {
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    background: rgba(255, 255, 255, 0.5);
  }
}
@keyframes progress {
  0% {
    left: -130%;
    background: rgba(0, 0, 0, 0.5);
  }
  50% {
    left: 130%;
    background: rgba(0, 0, 0, 0.5);
  }
  51% {
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    background: rgba(255, 255, 255, 0.5);
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes pulse {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes pulse2 {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@keyframes pulse2 {
  0%, 100% {
    -webkit-transform: translate(-50%, -50%) scale(0);
            transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    -webkit-transform: translate(-50%, -50%) scale(1);
            transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
}
@-webkit-keyframes flipWalker {
  0% {
    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
            transform: translate(0, 0) rotateX(0) rotateY(0);
  }
  25% {
    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }
  50% {
    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotateX(0) rotateY(360deg);
            transform: translate(0, 0) rotateX(0) rotateY(360deg);
  }
}
@keyframes flipWalker {
  0% {
    -webkit-transform: translate(0, 0) rotateX(0) rotateY(0);
            transform: translate(0, 0) rotateX(0) rotateY(0);
  }
  25% {
    -webkit-transform: translate(100%, 0) rotateX(0) rotateY(180deg);
            transform: translate(100%, 0) rotateX(0) rotateY(180deg);
  }
  50% {
    -webkit-transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
            transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg);
  }
  75% {
    -webkit-transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
            transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg);
  }
  100% {
    -webkit-transform: translate(0, 0) rotateX(0) rotateY(360deg);
            transform: translate(0, 0) rotateX(0) rotateY(360deg);
  }
}