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
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 Cube Image
3D Cube Image

Welcome to another tutorial of Web-design in StorialTech.This tutorial we make a nice 3D cube image..


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..