<!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>Marquee</title>
<style>
html,body{
margin: 0;
padding: 0;
height: 100vh;
}
.container {
margin: 0 auto;
/* marquee_list的宽度需要大于父级的宽度,否则会出现空隙卡顿的现象 */
max-width: 1040px;
background-color: #f5f5f5;
padding: 2rem;
padding-top: 0;
overflow: hidden;
}
.marquee {
width: 100%;
white-space: nowrap;
overflow: hidden;
background-color: #e6e6e6;
line-height: 3rem;
}
.marquee .marquee_list {
display: inline-block;
}
.marquee .marquee_list.rtl {
/* 动画名 动画时长 线性 重复播放 */
animation: marquee_rtl 10s linear infinite;
/* 动画时长请根据marquee_list的长度适当调整(即滚动速度) */
}
.marquee .marquee_list.ltr {
/* 动画名 动画时长 线性 重复播放 */
animation: marquee_ltr 10s linear infinite;
/* 动画时长请根据marquee_list的长度适当调整(即滚动速度) */
}
.marquee .marquee_item {
css文字左右滚动的实现(类marquee)
最新推荐文章于 2024-05-11 11:24:23 发布