Every web designer's need to know many feature design for his skill and website. Now we..
Web designer's need to know many feature design for his skill and website. Now we make a 3D Slinky Text for Website with Html and Css which you can use in your website. index.html and style.css file. First you create a html file which name is index.html , then open your file with your editor and type this html code -
index.html
<!DOCTYPE html>
<html>
<head>
<title>Slinky Text</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="slinky">
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
<h2>StoiralTech</h2>
</div>
</body>
</html>
Now you also create a css file which name is style.css and open with your editor. Then type css code -
style.css
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;
}
}
Tutor: Rakib Alom
0 Comments Here
Authentication required
You must log in to post a comment.
Log in