Now we will make 3D Slinky Text with Html and Css. First you create a html file which name is 'index.html', then open your file with your editor and type this html code -
<!DOCTYPE html>
<html>
<head>
<title>Slinky Text</title>
<style>
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.slinky{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.slinky h2{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 8em;
padding: 0;
margin: 0;
color: #fff;
-webkit-text-stroke: 1px #000;
animation: animate alternate 4s infinite;
}
.slinky h2:nth-child(1){
animation-delay: .05s;
color: #03a9f4;
}
.slinky h2:nth-child(2){
animation-delay: .10s;
color: #e91e63;
}
.slinky h2:nth-child(3){
animation-delay: .15s;
color: #9c27b0;
}
.slinky h2:nth-child(4){
animation-delay: .20s;
color: #2196f3;
}
.slinky h2:nth-child(5){
animation-delay: .25s;
color: #d4e157;
}
.slinky h2:nth-child(6){
animation-delay: .30s;
color: #f57c00;
}
.slinky h2:nth-child(7){
animation-delay: .35s;
color: #9e9e9e;
}
.slinky h2:nth-child(8){
animation-delay: .40s;
color: #651fff;
}
.slinky h2:nth-child(9){
animation-delay: .45s;
color: #d32f2f;
}
.slinky h2:nth-child(10){
animation-delay: .50s;
}
@keyframes animate{
0%,100%{
top: -150px;
left: -50px;
}
25%{
left: 250px;
}
50%{
top: 150px;
left: 50px;
}
75%{
left: -250px;
}
}
</style>
</head>
<body>
<div class="slinky">
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
<h2>Microniyan Designer</h2>
</div>
</body>
</html>
Tutor: Rakib Alom