Exciting Multi-line Highlight Animation Pure CSS

M.Muzammil

11 Apr, 2020

Exciting Multi-line Highlight Animation Pure CSS

<div class="container">
  <div class="instruction">Hover the paragraph to see the effect 👀 </div>
  <h1>HIGHLIGHT 📝</h1>
  <div class="content v2">
    <p>Woah, That's pretty cool, Gotta remember that ! I'm just gonna highlight this for future reference. Who knows I might forget this. Better not forget this. I wish my memory was better, But oh well, that's that.</p>
  </div>
  <h1>SPOILERS 💩</h1>
  <div class="content v3">
    <p>This season is gonna blow your mind ! Like this season is crazy dawg! You know what happens on the first episode ? You are not gonna believe me bro, like It's crazy dude !</p>
  </div>
  <h1>UNDERLINE 🍧</h1>
  <div class="content v1">
    <p>This thing is really really important, you don't wanna miss this. Trust me. This is like really really important. like really really.</p>
  </div>
  <h1>DASHES 😎</h1>
  <div class="content v4">
    <p>I dont' know dude, May be this could be important, May be not, who knows? I don't know, Do you know? Do you know somebody that knows this maybe, call me maybe.</p>
  </div>
  <h1>SEE DELETED 🙈</h1>
  <div class="content v5">
    <p>Remember when I told you about this thing back in the day, when I was younger, you know those days right? Well guess what, I was totally wrong about that. Heh, This is embarassing </p>
  </div>
  <h1>SEE DELETED 🙈2 </h1>
  <div class="content v6">
    <p>Hold on, Hold on. May be I WAS right at the time, they just changed the stuff now. Like I didn't know this was gonna happen, but now that It did, Well I guess I have to remove this now..</p>
  </div>
  <h1>CRAZY LINES 🤡</h1>
  <div class="content v7">
    <p>YO! What's up everybody, It's ya-boi Shloopy Mcfloopy-face, back at it again with the new stuff! This time it's gon-be liiiittt, son ! Hit that Subscribbe Button, Smash that bell! See you guys on the next video</p>
  </div>
  <h1>SWIPE 🎨</h1>
  <div class="content v8">
    <p>Here is the point, This point of mine is Striking, It is powerful. It is important. I have the data to back that up, Statistics show that this point of mine is indeed true. A Study conducted in 2015 proves that I have been right all along, what you gonna do about it huh?</p>
  </div>
</div>

body {
  font-family: Arial;
  font-size: 1.5rem;
  line-height: 150%;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 1em;
}
.container h1 {
  font-size: 2.2rem;
}
.container .instruction {
  font-size: 1.8rem;
  margin-bottom: 4rem;
  font-style: italic;
}
.content {
  margin-bottom: 4em;
}
.content p {
  display: inline;
  background-repeat: no-repeat;
  transition: all 500ms ease-in-out;
}
.v1 p {
  background-position: bottom left;
  background-size: 0% 5px;
  background-image: linear-gradient(#d63031, #d63031);
  padding-bottom: 5px;
}
.v1:hover p {
  background-size: 100% 5px;
}
.v2 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(#55efc4, #55efc4);
}
.v2:hover p {
  background-size: 100% 100%;
}
.v3 p {
  color: transparent;
  background-position: right;
  background-size: 100% 100%;
  background-image: linear-gradient(#0984e3, #0984e3);
}
.v3:hover p {
  color: #000;
  background-size: 0% 100%;
}
.v4 p {
  background-position: bottom left;
  background-size: 0% 3px;
  background-image: repeating-linear-gradient(to right, #4834d4 0 3px, transparent 0 6px);
  padding-bottom: 3px;
}
.v4:hover p {
  background-size: 100% 3px;
}
.v5 p {
  background-position: center left;
  background-size: 100% 3px;
  background-image: linear-gradient(to right, #000, #000);
  padding-bottom: 3px;
}
.v5:hover p {
  background-size: 100% 100%;
  color: #fff;
  background-image: linear-gradient(to right, #d63031, #d63031);
}
.v6 p {
  background-position: center left;
  background-size: 100% 4px;
  background-image: linear-gradient(to right, #000, #000);
  padding-bottom: 4px;
}
.v6:hover p {
  background-position: bottom left;
  background-size: 100% 2px;
  font-style: italic;
}
.v7 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(to right, #55efc4, #55efc4);
}
.v7:hover p {
  background-position: right;
  background-size: 100% 100%;
}
.v8 p {
  background-position: left;
  background-size: 0% 100%;
  background-image: linear-gradient(to right, #55efc4, #ff0);
  padding-bottom: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.v8:hover p {
  background-size: 100% 100%;
}

M.Muzammil

I am Muzammil, a Self-taught Web Designer & Developer. I haven't yet completed my college degree. Started learning programming at the age of 12 and still learning. I love to work in Javascript and make eye-catchy designs. Free for your calls :)

Exciting Multi-line Highlight Animation Pure CSS

M.Muzammil

Popular Posts

Categories

Hashtag

Blog Archive

M.Muzammil

Popular Posts

Select Text and Share On Social Media

Password Strength Meter

Beautiful Toast Notifications

Responsive Cookie Bar

Floating Draggable Menu Like Messenger

Categories

Hashtag

Blog Archive