一、效果
二、代码(html和css)
注意:新建一个html文件就可以实现
animation用来实现动画配合@keyframes使用
语法:动画指定需要多少秒或毫秒完成
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
name: 指定要绑定到选择器的关键帧的名称
duration:动画指定需要多少秒或毫秒完成
timing-function:设置动画将如何完成一个周期
delay:设置动画在启动前的延迟间隔。
iteration-count:定义动画的播放次数。
direction: 指定是否应该轮流反向播放动画。
fill-mode: 指定是否应该轮流反向播放动画。(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式
play-state:指定动画是否正在运行或已暂停。
transform用来实现过渡效果
w3c文档介绍:transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes wordsLoop {
0% {
transform: translateX(600px);
}
100% {
transform: translateX(-100%);
}
}
.box {
width: 600px;
overflow: hidden;
margin-right: 26px;
}
.animation {
display: inline-block;
padding-left: 20px;
color: #FF0027;
font-size: 24px;
line-height: 24px;
white-space: nowrap;
animation: wordsLoop 10s linear infinite normal;
}
</style>
</head>
<body>
<div class='notice'>
<div class='box'>
<span class='animation'>因国庆假期车管所业务暂停,9月26日起邮寄资料的年审</span>
</div>
</div>
</body>
</html>