3D Slinky Text with Html and Css

3D Slinky Text with Html and Css

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
Related Post
StorialTech3D Animated Image with Html and Css Code Part 1
3D Animated Image with Html and Css Code Part 1

Every web designer's need to know many feature design for his skill and website. Now we..


StorialTechNice background Image Intro Page
Nice background Image Intro Page

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice "Background Image intro-page"..


StorialTech3D Slinky Text with Html and Css
3D Slinky Text with Html and Css

Web designer's need to know many feature design for his skill and website. Now we make..