公告不停的滚动
2020-03-31 本文已影响0人
秀萝卜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3_MARQUEE</title>
<style>
.marquee {
width: 450px;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
animation: marquee 10s linear infinite;
}
.marquee:hover {
animation-play-state: paused
}
@keyframes marquee {
0% { text-indent: 30rem }
100% { text-indent: -30rem }
}
/* Make it pretty */
.microsoft {
position: relative;
font: 16px 'Segoe UI', Tahoma, Helvetica, Sans-Serif;
}
</style>
</head>
<body>
<p class="microsoft marquee">2020年愿大家一切顺利，身体健康，开心快乐</p>
</body>
</html>
