我要评论利用@keyframes设定文字的移动范围为整个屏幕的长度
@keyframes mycarton{
from{
margin-left: 0;
}
to{
margin-left:100%;
}
}利用类选择器实现5个盒子的定义，这里要实现5种不同的效果，所以设置了5种不同的选择器；
.box1{
color:blue;
width:200px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:linear;
}
.box2{
color:yellowgreen;
width:20px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease;
}
.box3{
color:black;
width:20px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease-in;
}
.box4{
color:gold;
width:20px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease-out;
}
.box5{
color:pink;
width:20px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease-in-out;
}简单介绍一下animation不同属性值的使用：
1. `animation-name`: 规定动画的名称。值为动画名称或`none`。
2. `animation-duration`: 规定动画完成一个周期所花费的时间。值为时间，如`s`、`ms`等。
3. `animation-timing-function`: 规定动画的速度曲线。值为速度函数名称，如`linear`、`ease-in`、`ease-out`等。
4. `animation-delay`: 规定动画开始前的延迟。值为时间，如`s`、`ms`等。
5. `animation-iteration-count`: 规定动画应该播放的次数。值为整数、`infinite`或`none`。
6. `animation-direction`: 规定是否应该轮流反向播放动画。值为`normal`、`reverse`、`alternate`或`alternate-reverse`。
7. `animation-fill-mode`: 规定当动画不播放时（当动画完成之前，或者当动画已经结束时），要应用什么样的样式。
8. `animation-play-state`: 规定动画是否正在运行或已暂停。
最后，插入文字实现效果
<div class="box1">最想去的城市</div>
<div class="box2">苏州</div>
<div class="box3">杭州</div>
<div class="box4">西安</div>
<div class="box5">扬州</div>完整的代码如下
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
@keyframes mycarton{
from{
margin-left: 0;
}
to{
margin-left:100%;
}
}
.box1{
color:blue;
width:200px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:linear;
}
.box2{
color:yellowgreen;
width:20px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease;
}
.box3{
color:black;
width:20px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease-in;
}
.box4{
color:gold;
width:20px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease-out;
}
.box5{
color:pink;
width:20px;
height: 10px;
animation-name:mycarton;
animation-duration: 10s;
animation-iteration-count: infinite;
animation-timing-function:ease-in-out;
}
</style>
<title>无标题文档</title>
</head>
<body>
<div class="box1">最想去的城市</div>
<div class="box2">苏州</div>
<div class="box3">杭州</div>
<div class="box4">西安</div>
<div class="box5">扬州</div>
</body>
</html>
发表评论