Word Carousel using HTML and CSS

Hello friends, today we will see you in this blog you'll learn HTML code for Word Carousel using HTML and CSS codes for website| HTML Website Tutorials indicoderz .Earlier I have shared a blog on how to create a HTML code for Word Carousel using HTML and CSS codes for website| HTML Website Tutorials indicoderz Generally.

HTML Code

   
  <html>

	<head> 

  <meta charset="UTF-8"> 

  <title>indicoderz Word Carousel</title> 

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> 

  <link rel="stylesheet" href="./style.css"> 

 </head> 

 <body>

  <div class="frame"> 

   <div class="center"> 

    <div class="carousel"> 

     <div class="pre">

      I'm a 

     </div> 

     <div class="change_outer"> 

      <div class="change_inner"> 

       <div class="element">

        Developer

       </div> 

       <div class="element">

        Youtuber

       </div> 

       <div class="element">

        Freelancer

       </div> 

       <div class="element">

        Learner

       </div> 

       <div class="element">

        Developer

       </div> 

      </div> 

     </div> 

    </div> 

   </div> 

</body>

</html>

CSS Code

  @import url(https://fonts.googleapis.com/css?family=Open+Sans:700,400);

body{

  background:#FFBF00;

}

.center {

  position: absolute;

  top: 49.5%;

  left: 0;

  right: 0;

  margin-top: -22.5px;

}

.carousel {

  position: relative;

  width: 100%;

  text-align: center;

  font-size: 30px;

  line-height: 45px;

  height: 45px;

}

.carousel .pre {

  position: absolute;

  top: 0;

  right: 56%;

  height: 45px;

}

.carousel .change_outer {

  position: absolute;

  top: 0;

  left: 46%;

  text-align: left;

  height: 45px;

  overflow: hidden;

}

.carousel .change_outer .change_inner {

  position: relative;

  -webkit-animation: rotate 8s ease-in-out infinite;

          animation: rotate 8s ease-in-out infinite;

}

.carousel .change_outer .element {

  display: block;

  font-weight: 700;

}

@-webkit-keyframes rotate {

  0%, 20% {

    transform: translateY(0);

  }

  25%, 40% {

    transform: translateY(-45px);

  }

  50%, 60% {

    transform: translateY(-90px);

  }

  70%, 80% {

    transform: translateY(-135px);

  }

  100% {

    transform: translateY(-180px);

  }

}

@keyframes rotate {

  0%, 20% {

    transform: translateY(0);

  }

  25%, 40% {

    transform: translateY(-45px);

  }

  50%, 60% {

    transform: translateY(-90px);

  }

  70%, 80% {

    transform: translateY(-135px);

  }

  100% {

    transform: translateY(-180px);

  }

}

Word Carousel using HTML and CSS

HTML Code

CSS Code

Output

Post a Comment

Post a Comment

Contact Form

Word Carousel using HTML and CSS in Web Design

Word Carousel using HTML and CSS

HTML Code

CSS Code

Output

You might like

Post a Comment

Post a Comment

Contact Form