CSS3+H5实现跑马灯效果
以下是使用CSS3和HTML5实现跑马灯效果的示例代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee Effect</title>
<style>
.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.marquee:before, .marquee:after {
position: absolute;
top: 0;
width: 50%;
height: 100%;
content: '';
}
.marquee:before {
left: 0;
background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
.marquee:after {
right: 0;
background-image: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="marquee">
这是一个跑马灯效果的文本信息，可以连续滚动显示。
</div>
</body>
</html>这段代码会创建一个带有跑马灯效果的div元素，文本内容会不断循环滚动。通过CSS3的动画（@keyframes）特性实现滚动效果，并通过伪元素::before和::after来实现滚动时的渐变效果，增强视觉效果。
评论已关闭