Issue
How can I add a background colour to the words in bold, yet retain the existing typewriter animation?
The words currently marked within tags I would like to highlight with a background colour.
body {
font-size:30px;
padding:20px;
background:#F7F7F7;
color:#333;
font-family: arial, sans-serif;
}
h1 {
max-width: 900px;
}
.type {
color:#0000;
background:
linear-gradient(-90deg,#333 5px,#0000 0) 10px 0,
linear-gradient(#333 0 0) 0 0;
background-size:calc(var(--n)*1ch) 200%;
-webkit-background-clip: padding-box,text;
background-clip: padding-box,text;
background-repeat:no-repeat;
animation:
b .7s infinite steps(1),
t calc(var(--n)*.05s) steps(var(--n)) forwards;
}
@keyframes t{
from {background-size:0 200%}
}
@keyframes b{
50% {background-position:0 -100%,0 0}
}
<h1><span class="type" style="--n:200">Lorem ipsum dolor <strong>sit amet</strong>, consectetur adipiscing elit. Mauris sit amet <strong>tincidunt</strong> urna. </span></h1>
Solution
Formatting the code in this way, it's possible to do:
@keyframes typing {
from { width: 100% }
to { width: 0 }
}
strong {background-color: #ff0000;}
.container {
position: relative;
font-family: Consolas, monospace;
}
.typing {
position: absolute;
top: 0;
margin: 0;
z-index: -1;
}
.hiders {
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
.hiders p {
position: relative;
clear: both;
margin: 0;
float: right; /* makes animation go left-to-right */
width:0; /* graceful degradation: if animation doesn't work, these are invisible by default */
background: white; /* same as page background */
animation: typing 2s steps(30, end);
animation-fill-mode: both; /* load first keyframe on page load, leave on last frame at end */
}
.hiders p:nth-child(2) {
animation-delay: 2s;
}
.hiders p:nth-child(3) {
animation-delay: 4s;
}
.hiders p:nth-child(4) {
animation-delay: 6s;
}
.hiders p:nth-child(5) {
animation-delay: 8s;
}
<div class="container">
<!-- container div is required to set absolute positions within it, so that .typing and .hiders exactly overlap -->
<p class="typing">
Lorem ipsum dolor <strong>sit amet</strong>, consectetur adipiscing elit. Mauris sit amet <strong>tincidunt</strong> urna.
</p>
<div class="hiders">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>
</div>
Source: https://jsfiddle.net/hjwp/514cLzxn/
Answered By - siaeva
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.