How to use css3 to achieve on-screen comment effect

This article mainly introduces how to use css3 to achieve on-screen comment effect, the article is very detailed, has a certain reference value, interested friends must read it!

How to realize on-screen comment through css3

First, let's take a look at how to implement the simplest on-screen comment through css's method:

First, define the dom structure of a barrage in html:

I'm the barrage.

The movement of the barrage can be realized by moving the block. Take the barrage moving from right to left as an example. The initial position of the barrage is on the left side of the container and is hidden (the leftmost part of the barrage fits the rightmost part of the container). It can be realized by absolute positioning and transform:

.block {position:absolute;}

Initial position:

From {left:100%; transform:translateX (0)}

Move to the leftmost end position (the rightmost part of the barrage fits the leftmost part of the container):

To {left:0; transform:translateX (- 100%)}

You can define two complete on-screen animations based on the start and end positions:

@ keyframes barrage {from {left:100%; transform:translateX;} to {left:0; transform:translateX (- 100%);}}

Introduce this animation to the on-screen comment element:

.block {position:absolute; / * other decorate style * / animation:barrage 5s linear 0s;}

In this way, a beggar version of the bullet screen effect can be achieved.

The above is all the contents of the article "how to use css3 to achieve on-screen comment effect". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!