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

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

声明：小猿资源站是一个资源分享和技术交流平台，本站所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

实现效果：

思路

具体代码

相关文章