First the last rendering
Have you found that it is very similar to the billboards on the street at night, let's see how to use css to achieve it
structural analysis
First of all, it is obvious that a box should be used to pack the text and center the text, and then we can see that there are two light bands around the box, so how are these two light bands realized?
In fact, this is achieved by using four small boxes. Place these four small boxes around the big box (close to the inner wall of the big box), and then use these small boxes to achieve the streamer (marquee) effect.
Next, look at the specific code implementation
Code
HTML structure
First prepare a div大box for our slogan and four small boxes for the marquee
<div class="main">
跑马灯
<div></div>
<div></div>
<div></div>
<div></div>
</div>Set the style for the big box so that we can see it in the browser
body {
background-color: #000;
}
.main {
position: absolute;
width: 400px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);//当为百分百单位时，相对的是自身的宽高
overflow: hidden; //溢出部分隐藏
text-align: center;
line-height: 150px;
background-color: transparent;
color: aquamarine;
font-size: 30px;
font-family: '宋体';
}The current effect is like this
Next we set the lighting effect for the big box.
interior lighting effects
In the effect picture, we can see that the color of the tail of the light is lighter, and the color of the head is brighter, showing a transitional effect. How is this effect achieved?
Here we need to use backgrounda new attribute value in css3: linear-gradient, through this attribute, we can set multiple colors as the background color of a box, and there is also a transition effect. The more powerful thing is that this attribute value can be set The direction of the gradient.
grammar:linear-gradient(渐变方向,color1,color2,color3...)
Here I chose three colors of #fff, #acd, cyan gradient
Then start using this attribute value, which is the effect of one of the small boxes (top), and the other effects are implemented in a similar way.
.main div {
position: absolute;
}
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%; //与父盒子等宽
height: 2px; //高要设置得较小
background: linear-gradient(to right, #fff, #acd, cyan);
}Here is the lighting effect on the top, set the position of the box using the properties of topand ; use to make the width of the box consistent with the big box, and then use to set the width of the light bar to 2px, of course, it can also be used according to actual needs , change the width of the light barleftwidth:100%height:2px
Then the implementation principle of the remaining three lights is basically the same, only the position and background color are different
The remaining right, bottom, and left background color gradient directions are to bottom, to left,to top
The current effect is like this:
This is getting more and more like the marquee effect we want
In fact, we are still short of the last step, adding animation effects to the lights, which is the animation animation property in css3
Similarly, we also set the lighting effect on the top as a demonstration:
css3 animation:
@keyframes run1 {
from {
transform: translateX(-100%) //初始让它沿X轴负方向（向左）位移自身的宽度
}
to {
transform: translateX(100%) //动画结束时，让它回到原位
}
}
Animate the box
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
animation: run1 1s linear infinite;//复合属性写法，其中infinite是让动画效果无限循环
background: linear-gradient(to right, #fff, #acd, cyan);
}Before the animation is set, you can see that the darkest part is on the far right, but the realization requirement of the marquee is that the darkest part appears from the left and then moves to the right, so the initial position of the animation should be moved to the left for the entire box length, so that the requirement
The implementation of the remaining three boxes is similar. After setting, we will finally get the marquee effect we want
If you want to understand css3 animation, you can read this article, which is explained in detail
The whole code is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
body {
background-color: #000;
}
.main {
position: absolute;
width: 400px;
height: 150px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
text-align: center;
background-color: transparent;
line-height: 150px;
color: aquamarine;
font-size: 30px;
font-family: '宋体';
}
.main div {
position: absolute;
}
.main :nth-child(1) {
top: 0;
left: 0;
width: 100%;
height: 2px;
animation: run1 1s linear infinite;
/* animation-delay: 0s; */
background: linear-gradient(to right, #fff, #acd, cyan);
}
.main :nth-child(2) {
top: 0;
right: 0;
height: 100%;
width: 2px;
animation: run2 1s linear infinite;
/* animation-delay: 1s; 设置动画延迟加载时间*/
background: linear-gradient(to bottom, #fff, #acd, cyan);
}
.main :nth-child(3) {
bottom: 0;
left: 0;
height: 2px;
width: 100%;
animation: run3 1s linear infinite;
/* animation-delay: 2s; 设置动画延迟加载时间*/
background: linear-gradient(to right, #fff, #acd, cyan);
}
.main :nth-child(4) {
top: 0;
left: 0;
height: 100%;
width: 2px;
animation: run4 1s linear infinite;
/* animation-delay: 3s; 设置动画延迟加载时间 */
background: linear-gradient(to top, #fff, #acd, cyan);
}
@keyframes run1 {
from {
transform: translateX(-100%)
}
to {
transform: translateX(100%)
}
}
@keyframes run2 {
from {
transform: translateY(-100%)
}
to {
transform: translateY(100%)
}
}
@keyframes run3 {
from {
transform: translateX(100%)
}
to {
transform: translateX(-100%)
}
}
@keyframes run4 {
from {
transform: translateY(100%)
}
to {
transform: translateY(-100%)
}
}
</style>
<body>
<div class="main">
海绵宝宝
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>Finally, I hope this article was helpful to you, Arigado