Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

There are bullets inside the mission received, headache, how to achieve it? Change the content regularly? Operating the DOM? This is too much trouble! Then my predecessor offered me a scheme to use the keyframes attribute, which I also rejected at the beginning. In my mind, it seemed very troublesome, but after using it, Emma, it smells so sweet, I almost fell in love with it. Let’s talk about the keyframes attribute

Introduce keyframes

Simply put, Keyframes are custom style transitions

grammar

@keyframes name {from {from XXX style} to {change to XXX style}} @keyframes name {from {from XXX style} to {change to XXX style}} @keyframes name {0% {0% when XX like} 50% {50% when XX like}... 100% {100% of the time XX like}}Copy the code

Use keyframes

How did the defined style change, how to use it? This is done by binding CSS3’s animation property.

// Animation syntax, there are a few others, but I only use these ones here, so I only introduce these animation: animation name animation completion time animation completion mode (uniform?) Animation execution times;Copy the code

Let’s start the actual time of the barrage

Implementation idea: set up a bullet screen visible area, beyond this range, can not be seen; Put the barrage in a row, slide from right to left, so you can achieve the function of the barrage, ha ha, is not very simple, let’s look at the code

layout

<div class="box"> <ul class="info"> <li> <img class="avatar" SRC ="./user1.png"/> <span class="content"> < / li > < li > < img class = "avatar" SRC = ". / user2. PNG "/ > < span class =" content "> nice well see see < / span > < / li > < / ul > < / div >Copy the code

The style is set

*/ * {margin: 0; padding: 0; } .box { width: 255px; height: 31px; border-radius: 19px 0px 0px 19px; background-color: bisque; margin: 20px auto; } .box .info { width: 520px; height: 100%; list-style: none; /* Transform: translateX(225px); } .info li { float: left; width: 255px; height: 100%; background-color: plum; border-radius: 19px 0px 0px 19px; } li .avatar { float: left; width: 27px; height: 27px; border: 1px solid #ffffff; border-radius: 50%; } li .content { float: left; height: 31px; color: #fff; font-size: 12px; padding-left: 7px; line-height: 31px; }Copy the code

The layout is 🙅🏻♀️ and the result is as follows:

Now it’s time to get him rolling

Set the KeyFrames property:

@keyframes scroll2 {0% {/** start at the right */ transform: translateX(225px); } 33% { transform: translateX(0px); } 66% { transform: translateX(-260px); } 100% { transform: translateX(-520px); }}Copy the code

Add an animation to ul:

animation: 12s scroll2 infinite linear;
Copy the code

Set some background color to make the barrage look better

Final effect :(recording screen is not very good)

Final CSS code:

*/ * {margin: 0; padding: 0; } body { background: #1e2b1b; } .box { width: 255px; height: 31px; border-radius: 19px 0px 0px 19px; margin: 20px auto; } .box .info { width: 520px; height: 100%; list-style: none; animation: 12s scroll2 infinite linear; } .info li { float: left; width: 255px; height: 100%; border-radius: 19px 0px 0px 19px; background: Linear-gradient (90DEg, RGBA (253, 150, 51, 0.46) 0%, RGBA (119, 169, 107, 0.36) 59%, RGBA (254, 205, 168, 0) 100%); } li .avatar { float: left; width: 27px; height: 27px; border: 1px solid #ffffff; border-radius: 50%; } li .content { float: left; height: 31px; color: #fff; font-size: 12px; padding-left: 7px; line-height: 31px; } @keyframes scroll2 { 0% { transform: translateX(225px); } 33% { transform: translateX(0px); } 66% { transform: translateX(-260px); } 100% { transform: translateX(-520px); }}Copy the code

Ok, this is the end of keyframes, welcome to point out any shortcomings,886~