Jackpot text styling – css – knowledgebase JJ

<style>
@font-size-various: 50px;
@line-height: @font-size-various * 1.3;

.block {
  width: 400px;
  height: 400px;
  margin: auto;
  background: orange;
  position: relative;
  .static-text {
    font-size: @font-size-various;
    text-align: center;
    line-height: @line-height;
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
  }
  .carousel {
    text-align: left;
    height: @line-height;
    font-size: @font-size-various;
    font-weight: bold;
    display: inline-block;
    vertical-align: top;
    animation: css-carousel 10s linear infinite;
  }
}

@-webkit-keyframes css-carousel {
  0%, 23% { margin-top: 0;}
  25%, 48% { margin-top: -(@line-height); }
  50%, 74% { margin-top: -(@line-height)*2; }
  75%, 94% { margin-top: -(@line-height)*3;}
  100% { margin-top: 0;}
}
</style>
<body>
    <div class="block">
        <div class="static-text">I'm a
            <div class="carousel">
                <div class="slide-1">Tiger</div>
                <div class="slide-2">Jaguar</div>
                <div class="slide-3">Panther</div>
                <div class="slide-4">Leopard</div>
            </div>
        </div>
    </div>
</body>
Leave a comment Cancel reply
