How to use css to realize scrolling text
This article mainly introduces how to use css to achieve scrolling text, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.
Code
Html
Example:
Scrolling text, I am scrolling text
CSS
.box {
Height:auto
Background-color:blue
}
. box-text {
Color:white
Background:-ms-gradient (linear,lefttop,righttop,color-stop), color-stop (.4), color-stop (.5), color-stop (.6), color-stop (1m))
Background:-webkit-gradient (linear,lefttop,righttop,color-stop), color-stop (.4), color-stop (.5), color-stop (.6), color-stop (1m))
Background-clip:text
-webkit-text-fill-color:transparent
Animation:slidetounlock3sinfinite
-webkit-animation:slidetounlock3sinfinite
}
@-webkit-keyframesslidetounlock {
0% {
Background-position:-200px0
}
100% {
Background-position:200px0
}
}
Realization principle
1. Animation effect
@-webkit-keyframes
Define a set of animations in which the position of the background is changed (note the position of the text)
2. Why did you choose the background to the text instead of the whole background?
Background-clip:text
Function: specify the background of the drawing area
In addition to text, it also includes: border-box | padding-box | content-box;
3. How to achieve the effect of a small change?
Gradient ()
Function: gradient
From the actual effect, we can see that there is gray outside the white part, and the closer it is to white, the whiter it is.
-ms-gradient (linear,lefttop,righttop,color-stop (0meme 4d4d), color-stop (.4meme 4d4d), color-stop (.5meme 4d4d), color-stop (.6meme 4d4d), color-stop (1m)
Description: gradient type, linear gradient (z=x*y)
Toleft:
Set the gradient from right to left. Equivalent to: 270deg
Toright:
Sets the gradient from left to right. Equivalent to: 90deg
Totop:
Sets the gradient from bottom to top. Equivalent to: 0deg
Tobottom:
Sets the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving blank.
In this way, the gradual font part is realized.
-webkit-text-fill-color:transparent
Font fill color: inherits from the background, so the font color is the background of the set box-text, not the background color of box.
In this way, add an animation, move in a loop, and it is realized.
Thank you for reading this article carefully. I hope the article "how to use css to achieve scrolling text" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
