用css实现简单的文字动画

最新推荐文章于 2024-07-07 21:55:16 发布

Anne_Aust

最新推荐文章于 2024-07-07 21:55:16 发布

阅读量1k

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/anne_aust/article/details/130588547

版权

利用@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>

Anne_Aust

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用css实现简单的文字动画

值为`normal`、`reverse`、`alternate`或`alternate-reverse`。值为速度函数名称，如`linear`、`ease-in`、`ease-out`等。值为整数、`infinite`或`none`。7. `animation-fill-mode`: 规定当动画不播放时（当动画完成之前，或者当动画已经结束时），要应用什么样的样式。值为时间，如`s`、`ms`等。值为时间，如`s`、`ms`等。1. `animation-name`: 规定动画的名称。
复制链接

扫一扫