Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.marquee {
margin: 0 auto;
width: 600px;
height: 30px;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
.marquee:before, .marquee:after {
position: absolute;
top: 0;
width: 50px;
height: 30px;
content: "";
z-index: 1;
}
.marquee:before {
left: 0;
background: linear-gradient(to right, #ccc 10%, transparent 80%);
}
.marquee:after {
right: 0;
background: linear-gradient(to left, #ccc 10%, transparent 80%);
}
.marquee__content {
width: 300%;
display: flex;
line-height: 30px;
animation: marquee 10s linear infinite forwards;
}