<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - #DailyCSSImages 30 - Bar graph</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<main>
<section id="skills" class="toad-fullscreen">
<article class="skills">
<div class="t-6">
<p>HTML5<span></span><span class="skills"></span></p>
</div>
<div class="t-6">
<p>CSS3<span></span><span class="skills"></span></p>
</div>
<div class="t-6">
<p>JS / jQuery<span></span><span class="skills"></span></p>
</div>
<div class="t-6">
<p>Vue.js<span></span><span class="skills"></span></p>
</div>
<div class="t-6">
<p>PHP / MySQL<span></span><span class="skills"></span></p>
</div>
<div class="t-6">
<p>Laravel<span></span><span class="skills"></span></p>
</div>
<div class="t-6">
<p>Photoshop<span></span><span class="skills"></span></p>
</div>
<div class="t-6">
<p>Illustrator<span></span><span class="skills"></span></p>
</div>
</article>
</section>
</main>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
.skills {
animation-name: skills;
}
html {
font-size: 100%;
font-family: sans-serif;
}
body {
background: #5aa8e8;
}
html,
body,
main {
padding: 0;
margin: 0;
box-sizing: border-box;
}
main {
overflow: hidden;
position: relative;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
section {
background: #5aa8e8;
}
section article.skills {
width: 500px;
height: auto;
}
section article.skills p {
z-index: 2;
color: #fff;
padding: 10px;
position: relative;
box-sizing: border-box;
overflow: hidden;
}
section article.skills div span:nth-child(1) {
z-index: -2;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
background: #fff;
height: 100%;
width: 100%;
}
section article.skills div span:nth-child(2) {
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #5E95E8;
height: 100%;
}
section article.skills div:nth-child(1) span:nth-child(2) {
width: 90%;
animation-delay: 0;
}
section article.skills div:nth-child(2) span:nth-child(2) {
width: 90%;
animation-delay: 0.05s;
}
section article.skills div:nth-child(3) span:nth-child(2) {
width: 80%;
animation-delay: 0.1s;
}
section article.skills div:nth-child(4) span:nth-child(2) {
width: 70%;
animation-delay: 0.15s;
}
section article.skills div:nth-child(5) span:nth-child(2) {
width: 75%;
animation-delay: 0.2s;
}
section article.skills div:nth-child(6) span:nth-child(2) {
width: 60%;
animation-delay: 0.25s;
}
section article.skills div:nth-child(7) span:nth-child(2) {
width: 80%;
animation-delay: 0.3s;
}
section article.skills div:nth-child(8) span:nth-child(2) {
width: 75%;
animation-delay: 0.35s;
}
section:before {
position: absolute;
top: -250px;
left: -350px;
width: 500px;
height: 500px;
content: '';
background: rgba(108, 90, 232, 0.25);
transform: rotate(30deg);
}
section:after {
position: absolute;
bottom: -250px;
right: -350px;
width: 500px;
height: 500px;
content: '';
background: rgba(108, 90, 232, 0.25);
transform: rotate(30deg);
}
.skills {
animation: skills 1.25s cubic-bezier(0.17, 0.67, 0, 1);
}
@keyframes skills {
0% {
left: -500px;
opacity: 0;
}
100% {
left: 0;
opacity: 1;
}
}