• Login

Snippets

31


<div class="ticker-wrap">
<div class="ticker-heading">Fort Lauderdale</div>
<div class="ticker">
  
  <div class="ticker__item">Date: 04/30/2022 6:00 AM</div>
  <div class="ticker__item">[MONTHS] months!</div>
  <div class="ticker__item">[WEEKS] weeks!</div>
    <div class="ticker__item">[DAYS] days!</div>
      <div class="ticker__item">[HOURS] hours!</div>
        <div class="ticker__item">[MINUTES] minutes!</div>
          <div class="ticker__item">[SECONDS] seconds!</div>
            

</div>
</div>

CSS

@-webkit-keyframes ticker {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    visibility: visible;

  }

  100% {

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

  }

}

@keyframes ticker {

  0% {

    -webkit-transform: translate3d(0, 0, 0);

    transform: translate3d(0, 0, 0);

    visibility: visible;

  }

  100% {

    -webkit-transform: translate3d(-100%, 0, 0);

    transform: translate3d(-100%, 0, 0);

    max-width: 1120px;

  }

}

.ticker-heading {

  position: absolute;

  background: #000099;

  display: block;

  left: 0;

  top: 0;

  height: 2.9rem;

  padding: 11px 40px;

  z-index: 2;

  color: white;

  text-transform: uppercase;

  font-size: 1.175rem;

}

 

.ticker-wrap .ticker__item:before {

  content: "";

  height: 11px;

  width: 11px;

  display: inline-block;

  background-color: #1074bc;

  border-radius: 100%;

  position: relative;

  margin-right: 15px;

}

 

.ticker-heading:after {

  content: "";

  width: 0;

  height: 0;

  border-top: 8px solid transparent;

  border-bottom: 8px solid transparent;

  border-left: 11px solid #000099;

  position: absolute;

  margin-left: 40px;

}

 

.ticker-wrap {

  position: relative;

  bottom: 0;

  width: 100%;

  overflow: hidden;

  height: 2.9rem;

  background-color: #f9f9f9;

  padding-left: 100%;

  box-sizing: content-box;

}

.ticker-wrap .ticker:hover {

  -webkit-animation-play-state: paused;

  -moz-animation-play-state: paused;

  -ms-animation-play-state: paused;

  -o-animation-play-state: paused;

  animation-play-state: paused;

}

.ticker-wrap .ticker {

  display: inline-block;

  height: 2.6rem;

  line-height: 2.5rem;

  white-space: nowrap;

  padding-right: 100%;

  box-sizing: content-box;

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

  -webkit-animation-timing-function: linear;

  animation-timing-function: linear;

  -webkit-animation-name: ticker;

  animation-name: ticker;

  -webkit-animation-duration: 30s;

  animation-duration: 30s;

}

.ticker-wrap .ticker__item {

  display: inline-block;

  padding: 0 2rem;

  font-size: 1.175rem;

  color: #454545;

}




 

 

 

Post Rating

Comments

There are currently no comments, be the first to post one!

Post Comment

Name (required)

Email (required)

Website