Shine Effect

An example of text highlighting as a way to draw attention to a message.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Code Example

   <style>
    .content {
     position: relative;
     overflow: hidden;
     width: 99%;}

    .content p {
     font-size: 20px;
     line-height: 35px;
     font-weight: bold;
     font-family: sans-serif;
     cursor: pointer;}

   .content div {
    position: absolute;
    top: 0;
    height: 100%;
    left: -100px;
    width: 30%;
    background: linear-gradient(to right, white, transparent 50%);
    -webkit-text-fill-color: transparent;
    animation: shine 2.5s 1;
    overflow: hidden;}

   @keyframes shine {
    0% {
     left: -10%;
    }
    100% {
     left: 110%;
    }
   }
   </style>