SCSS
@import url('https://fonts.googleapis.com/css?family=Roboto:100');
html,
body {
height: 100%;
font-family: 'Roboto', sans-serif;
color: white;
}
@mixin shape() {
width: 25px;
height: 25px;
margin: 3px;
}
body {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/394353/psbackground.jpg");
}
h1 {
margin-left: 15px;
transform: translateY(30%);
}
.container {
height: 90%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.shapecontainer {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
height: 55px;
width: 75px;
}
#s1,
#s2,
#s3,
#s4 {
animation: anim 5s infinite;
}
#s2 {
animation-delay: .3s;
}
#s3 {
animation-delay: .6s;
}
#s4 {
animation-delay: .9s;
}
.square {
@include shape;
border: 2px solid white;
color: transparent;
}
.circle {
@include shape;
border-radius: 100%;
border: 2px solid white;
color: transparent;
}
.triangle {
@include shape;
font-size: 40px;
line-height: .7;
}
.x {
@include shape;
font-size: 40px;
line-height: .7;
}
@keyframes anim {
0% {
transform: scale(0) rotateZ(-90deg);
}
30%,
40%,
50% {
transform: scale(1) rotateZ(0deg);
}
100% {
transform: scale(0) rotateZ(360deg)
}
}
ES6
(() => {
let shapes = ["x", "circle", "triangle", "square"];
function setShapes() {
let s1 = document.getElementById("s1"),
s2 = document.getElementById("s2"),
s3 = document.getElementById("s3"),
s4 = document.getElementById("s4");
let shapeArray = [s1, s2, s3, s4];
s1.className = shapes[Math.floor(Math.random() * 4)];
s2.className = shapes[Math.floor(Math.random() * 4)];
s3.className = shapes[Math.floor(Math.random() * 4)];
s4.className = shapes[Math.floor(Math.random() * 4)];
for (let i = 0; i < 4; i++) {
shapeArray[i].className = shapes[Math.floor(Math.random() * 4)];
if (shapeArray[i].className === "triangle") {
shapeArray[i].textContent = "Δ";
} else if (shapeArray[i].className === "x") {
shapeArray[i].textContent = "X";
}
}
setTimeout(() => {
setShapes();
}, 5000);
}
setShapes();
})();
