css实现元素的横向运动动画效果

最新推荐文章于 2024-04-09 16:46:01 发布

金色熊族

最新推荐文章于 2024-04-09 16:46:01 发布

阅读量768

点赞数

分类专栏： html 文章标签： css css3 动画

本文链接：https://blog.csdn.net/liji_digital/article/details/130546770

版权

html 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

以如下代码为例，html的body中有一个header。现在在head中定义header的css样式：

<head>
<style>
      header{
        width:1200px;
        overflow:hidden;
		animation-name: HMove;
		animation-duration: 3s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
      }
@keyframes HMove{
	from {transform:translateX(0px);}
	to {transform:translateX(100px);}
}

</style>

</head>

<body style="background-image:url(img/wangyifan2.jpg); background-size:cover;">

<header>
	<h1><font color=#CD7F32>xxxxxx</font></h1>
</header>
</body>

style标签内给header定义了样式。

其中animation-name定义了动画的名字，在后面要用的。

animation-iteration-count是动画重复的次数，假如取值是infinite，则重复无限次。

animation-duration是完成一次动画的耗时。

animation-direction: alternate表示相邻的两次动画运行的方向是相反的。

接下来的@keyframes定义动画的具体行为。@keyframes后面的字符串对应前面animation-name的名字。其from项描述动画的初始状态。这里from初始状态是translateX(0px)，表示动画开始时元素没有任何偏移。to项描述动画的结束状态。这里to的状态是translateX(100px),表示动画结束时的状态是沿X方向偏移100个像素。

金色熊族

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css实现元素的横向运动动画效果

接下来的@keyframes定义动画的具体行为。@keyframes后面的字符串对应前面animation-name的名字。这里to的状态是translateX(100px),表示动画结束时的状态是沿X方向偏移100个像素。animation-iteration-count是动画重复的次数，假如取值是infinite，则重复无限次。animation-direction: alternate表示相邻的两次动画运行的方向是相反的。其中animation-name定义了动画的名字，在后面要用的。
复制链接

扫一扫