Hiệu ứng Canvas

Demo

Đầ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

Demo

Đầ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>

Template Blogspot Giống imuzik

Demo   Liên hệ

#Giao diện nghe nhạc, #Template blogspot nhạc, Template nhạc.

Code Trang 404 Hiệu Ứng Đẹp

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>

CSS Hiệu Ứng Thầy Trò Tây Du Ký Thỉnh Kinh

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Lp819LVj4KoefzyDFKuznV2pzlrSvz2-Gzr6lXxrdatguTBpxKsZmiQ0kOiOaG61qcdG4QJh0p1XT9z7Y3V2HAoDcTb6bF653wStrLOhK3oT9faSdAmby2RWWwkqifz2HuoOvqc0o2c/s1600/2.jpg);
  float: left;
  margin-left: -2000px;
 }
 .wk {
  z-index: 999;
  width: 200px;
  height: 180px;
  background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF8MKCt-G-4UqPFCeh9d941xzUfVp5wLW0q9lGSrLSHmzW-pQiswV8AGJ8LicfYzpfwB2iBjTPPynBmFCcvtR2XthWnlu9mbxE5PbADvWRpeDKB7PmV08e6WTD3Rf2PYNvGOvne0H4HTQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlcvabzLh1cMKK5lxM6p1W0JkMquopy9nnOuVIGlFZhwjeydp1vFhzfADFdYM-eIzfMA3Uhh3EEUPh7NRh4_06x5Zv0hZ8UN4-QjFjysDHwB8mC9zFp8YTQtK64Dy5KACl15QpLAMjq0A/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCpZ3g-Rx5H6u_9az1uFDJ4giK5NM34LHmabM5LKCEhwAi09bo5BChgSa7W6LPAsHx65dHJBS39xYRABfrEil9YSp0MZDYIdeZI3f9gR2TxCPtM83OLPHgDM_2eH64mItCssE2pjSua7Q/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BLzGfVIIRBfBs8BG6Y4ANPN7XK5xJyMtlVMYU4AGZSpZM_iVAlOR57ACkt29A1uKWvCMnK72umKwth7f2hgGR5tAvP3kDFoatX7lM7kTGGKCiN3ipdmtqVcvyL42PSeRwcTtWThcOPo/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>

Tổng hợp 8 CSS Hiệu ứng Loading

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);
  }
}

CSS Simple bảng giá tác thiết kế

Demo


Đầu tiền các bạn chèn đoạn css dưới vào:

<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"></link>
<style>
.demo{
            padding: 2em 0;
        }
        :root{
            --pricingTable-yellow: #faac01;
            --pricingTable-purple: #be4f91;
            --pricingTable-blue: #0192af;
        }
        .demo{ background: #dedddb; }
        .pricingTable{
            padding-bottom: 10px;
            background: #fff;
            border-bottom: 15px solid var(--pricingTable-yellow);
            text-align: center;
            overflow: hidden;
            position: relative;
        }
        .pricingTable:before{
            content: "";
            width: 100%;
            height: 350px;
            background: var(--pricingTable-yellow);
            position: absolute;
            top: -150px;
            left: 0;
            transform: skewY(-20deg);
        }
        .pricingTable .pricingTable-header{
            padding: 20px 20px 60px;
            text-align: left;
            position: relative;
        }
        .pricingTable .title{
            font-size: 30px;
            font-weight: 600;
            color: #fff;
            text-transform: uppercase;
            margin: 0;
        }
        .pricingTable .sub-title{
            display: block;
            font-size: 16px;
            color: #fff;
            text-transform: uppercase;
        }
        .pricingTable .year{
            width: 80px;
            height: 55px;
            background: #fff;
            padding: 7px 0;
            font-size: 15px;
            font-weight: 600;
            font-style: italic;
            color: var(--pricingTable-yellow);
            text-align: center;
            position: absolute;
            top: 30px;
            right: 20px;
            z-index: 1;
        }
        .pricingTable .year:before,
        .pricingTable .year:after{
            content: "";
            width: 57px;
            height: 57px;
            background: #fff;
            position: absolute;
            top: -28px;
            left: 50%;
            z-index: -1;
            transform: translateX(-50%) scaleY(0.5) rotate(45deg);
        }
        .pricingTable .year:after{
            top: auto;
            bottom: -28px;
        }
        .pricingTable .price-value{
            display: inline-block;
            width: 170px;
            height: 110px;
            padding: 15px;
            border: 2px solid var(--pricingTable-yellow);
            border-top: none;
            border-bottom: none;
            position: relative;
        }
        .pricingTable .price-value:before,
        .pricingTable .price-value:after{
            content: "";
            width: 121px;
            height: 121px;
            border: 3px solid var(--pricingTable-yellow);
            border-right: none;
            border-bottom: none;
            position: absolute;
            top: -60px;
            left: 50%;
            transform: translateX(-50%) scaleY(0.5) rotate(45deg);
        }
        .pricingTable .price-value:after{
            border-top: none;
            border-left: none;
            border-bottom: 3px solid var(--pricingTable-yellow);
            border-right: 3px solid var(--pricingTable-yellow);
            top: auto;
            bottom: -60px;
        }
        .pricingTable .value{
            width: 100%;
            height: 100%;
            background: #fff;
            border: 2px solid var(--pricingTable-yellow);
            border-top: none;
            border-bottom: none;
            color: var(--pricingTable-yellow);
            z-index: 1;
            position: relative;
        }
        .pricingTable .value:before,
        .pricingTable .value:after{
            content: "";
            width: 97px;
            height: 97px;
            background: #fff;
            border: 3px solid var(--pricingTable-yellow);
            border-bottom: none;
            border-right: none;
            position: absolute;
            top: -48px;
            left: 50%;
            z-index: -1;
            transform: translateX(-50%) scaleY(0.5) rotate(45deg);
        }
        .pricingTable .value:after{
            border-right: 3px solid var(--pricingTable-yellow);
            border-bottom: 3px solid var(--pricingTable-yellow);
            border-top: none;
            border-left: none;
            top: auto;
            bottom: -48px;
        }
        .pricingTable .currency{
            display: inline-block;
            font-size: 30px;
            margin-top: 7px;
            vertical-align: top;
        }
        .pricingTable .amount{
            display: inline-block;
            font-size: 40px;
            font-weight: 600;
            line-height: 65px;
        }
        .pricingTable .amount span{
            display: inline-block;
            font-size: 30px;
            font-weight: normal;
            vertical-align: top;
            margin-top: -7px;
        }
        .pricingTable .month{
            display: block;
            font-size: 16px;
            line-height: 0;
        }
        .pricingTable .pricing-content{
            padding: 50px 0 0 80px;
            margin-bottom: 20px;
            list-style: none;
            text-align: left;
            transition: all 0.3s ease 0s;
        }
        .pricingTable .pricing-content li{
            padding: 7px 0;
            font-size: 16px;
            color: #808080;
            position: relative;
        }
        .pricingTable .pricing-content li:before,
        .pricingTable .pricing-content li.disable:before{
            content: "\f00c";
            font-family: fontawesome;
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 50%;
            background: #98c458;
            text-align: center;
            color: #fff;
            position: absolute;
            left: -50px;
        }
        .pricingTable .pricing-content li.disable:before{
            content: "\f00d";
            background: #fe6c6c;
        }
        .pricingTable .pricingTable-signup{
            display: inline-block;
            width: 60%;
            height: 50px;
            line-height: 50px;
            font-size: 22px;
            font-weight: 700;
            color: var(--pricingTable-yellow);
            text-transform: uppercase;
            border: 2px solid var(--pricingTable-yellow);
            margin: 0 auto 10px;
            position: relative;
            transition: all 0.3s ease 0s;
        }
        .pricingTable .pricingTable-signup:hover{
            background: var(--pricingTable-yellow);
            color: #fff;
        }
        .pricingTable.purple{ border-bottom-color: var(--pricingTable-purple); }
        .pricingTable.purple:before{ background: var(--pricingTable-purple); }
        .pricingTable.purple .year{ color: var(--pricingTable-purple); }
        .pricingTable.purple .price-value{
            border-left-color: var(--pricingTable-purple);
            border-right-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .price-value:before{
            border-left-color: var(--pricingTable-purple);
            border-top-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .price-value:after{
            border-right-color: var(--pricingTable-purple);
            border-bottom-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .value{
            border-left-color: var(--pricingTable-purple);
            border-right-color: var(--pricingTable-purple);
            color: var(--pricingTable-purple);
        }
        .pricingTable.purple .value:before{
            border-left-color: var(--pricingTable-purple);
            border-top-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .value:after{
            border-right-color: var(--pricingTable-purple);
            border-bottom-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .pricingTable-signup{
            color: var(--pricingTable-purple);
            border-color: var(--pricingTable-purple);
        }
        .pricingTable.purple .pricingTable-signup:hover{
            color: #fff;
            background: var(--pricingTable-purple);
        }
        .pricingTable.blue{ border-bottom-color: var(--pricingTable-blue); }
        .pricingTable.blue:before{ background: var(--pricingTable-blue); }
        .pricingTable.blue .year{ color: var(--pricingTable-blue); }
        .pricingTable.blue .price-value{
            border-left-color: var(--pricingTable-blue);
            border-right-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .price-value:before{
            border-left-color: var(--pricingTable-blue);
            border-top-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .price-value:after{
            border-right-color: var(--pricingTable-blue);
            border-bottom-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .value{
            border-left-color: var(--pricingTable-blue);
            border-right-color: var(--pricingTable-blue);
            color: var(--pricingTable-blue);
        }
        .pricingTable.blue .value:before{
            border-left-color: var(--pricingTable-blue);
            border-top-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .value:after{
            border-right-color: var(--pricingTable-blue);
            border-bottom-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .pricingTable-signup{
            color: var(--pricingTable-blue);
            border-color: var(--pricingTable-blue);
        }
        .pricingTable.blue .pricingTable-signup:hover{
            color: #fff;
            background: var(--pricingTable-blue);
        }
        @media only screen and (max-width: 990px){
            .pricingTable{ margin-bottom: 30px; }
        }
        @media only screen and (max-width: 767px){
            .pricingTable:before{ transform: skewY(-15deg); }
            .pricingTable .title{ font-size: 22px; }
        }
</style>

Tiếp theo là đoạn mã code hiển thị:

 <div class="demo">
          <div class="container">
              <div class="row">
                  <div class="col-md-4 col-sm-6">
                      <div class="pricingTable">
                          <div class="pricingTable-header">
                              <h3 class="title">Standard</h3>
                              <span class="sub-title">Lorem ipsum</span>
                              <span class="year">Pay only <br>$110/year</span>
                          </div>
                          <div class="price-value">
                              <div class="value">
                                  <span class="currency">$</span>
                                  <span class="amount">10.<span>99</span></span>
                                  <span class="month">/month</span>
                              </div>
                          </div>
                          <ul class="pricing-content">
                              <li>50GB Disk Space</li>
                              <li>50 Email Accounts</li>
                              <li>50GB Monthly Bandwidth</li>
                              <li class="disable">10 Subdomains</li>
                              <li class="disable">15 Domains</li>
                          </ul>
                          <a href="#" class="pricingTable-signup">Sign up</a>
                      </div>
                  </div>

                  <div class="col-md-4 col-sm-6">
                      <div class="pricingTable purple">
                          <div class="pricingTable-header">
                              <h3 class="title">Business</h3>
                              <span class="sub-title">Lorem ipsum</span>
                              <span class="year">Pay only <br>$220/year</span>
                          </div>
                          <div class="price-value">
                              <div class="value">
                                  <span class="currency">$</span>
                                  <span class="amount">20.<span>99</span></span>
                                  <span class="month">/month</span>
                              </div>
                          </div>
                          <ul class="pricing-content">
                              <li>60GB Disk Space</li>
                              <li>60 Email Accounts</li>
                              <li>60GB Monthly Bandwidth</li>
                              <li>15 Subdomains</li>
                              <li class="disable">20 Domains</li>
                          </ul>
                          <a href="#" class="pricingTable-signup">Sign up</a>
                      </div>
                  </div>

                  <div class="col-md-4 col-sm-6">
                      <div class="pricingTable blue">
                          <div class="pricingTable-header">
                              <h3 class="title">Premium</h3>
                              <span class="sub-title">Lorem ipsum</span>
                              <span class="year">Pay only <br>$330/year</span>
                          </div>
                          <div class="price-value">
                              <div class="value">
                                  <span class="currency">$</span>
                                  <span class="amount">30.<span>99</span></span>
                                  <span class="month">/month</span>
                              </div>
                          </div>
                          <ul class="pricing-content">
                              <li>70GB Disk Space</li>
                              <li>70 Email Accounts</li>
                              <li>70GB Monthly Bandwidth</li>
                              <li>20 Subdomains</li>
                              <li>25 Domains</li>
                          </ul>
                          <a href="#" class="pricingTable-signup">Sign up</a>
                      </div>
                  </div>
              </div>
          </div>
      </div>
  
 </div>