Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.