CSS如何实现动画效果--移动？

猿友 2021-03-20 10:51:27 浏览数 (6219)

反馈

开发网页时，插入的图片或形状永远固定在一个地方可能会使浏览者产生视觉疲劳。如果能让产生运动效果，就可以完美解决此问题。那么网页中的运动效果--平移该如何实现呢？这篇文章 W3Cschool 小编教你 CSS 如何实现动画效果--移动。

实现效果：

CSS实现动画效果

思路

首先我们新建一个正方形，用<svg></svg>标签的<rect></rect>可以直接定义一个正方形。随后用<animate>即可定义动画效果。

<animate>的几个常用属性定义如下：

attributeName:指定哪个属性需要产生动画效果；
from：指定属性的起始值；
to：指定属性的结束值；
dur：指定动画运行的时间（持续时间）；
fill=“freeze|remove”：指定动画播放完毕后是停留在播放的终点还是回到起始位置；
repeatCount：指定动画的重复播放次数，无限重复动画：indefinite ；

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>平移动画- 编程狮(w3cschool.cn)</title>
</head>
<body>
	<svg width="500" height="150">
		<rect width="150" height="150" fill="red"> <!-- 创建一个正方形 -->
  			<animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/> 
    	</rect>
	</svg>
</body>
</html>

以上就是 CSS 如何实现动画效果--移动的全部内容。更多 CSS 相关教程请关注 W3Cschool 官网。

相关 CSS 效果：CSS如何设置图片旋转、CSS如何实现阴影效果