如何用css实现左右运动效果

本篇内容介绍了“如何用css实现左右运动效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

创新互联是网站建设专家,致力于互联网品牌建设与网络营销，专业领域包括成都网站设计、成都做网站、电商网站制作开发、成都小程序开发、微信营销、系统平台开发，与其他网站设计及系统开发公司不同，我们的整合解决方案结合了恒基网络品牌建设经验和互联网整合营销的理念，并将策略和执行紧密结合，且不断评估并优化我们的方案，为客户提供全方位的互联网品牌整合方案！

在css中，可以利用“@keyframes”规则和animation属性来实现左右运动效果，主要语法“@keyframes 动画名{0% {left:0px;}50%{left:200px;}100% {left:0px;}}”。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

在css中，可以利用“@keyframes”规则和animation属性来实现左右运动效果。

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
div
{
	width:100px;
	height:100px;
	background:red;
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}

@keyframes mymove
{
	0% {left:0px;}
	50%{left:200px;}
	100% {left:0px;}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	0% {left:0px;}
	50%{left:200px;}
	100% {left:0px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

效果图：

如何用css实现左右运动效果

说明：

使用@keyframes规则，你可以创建动画。创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中，您可以更改CSS样式的设定多次。

指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。0％是开头动画，100％是当动画完成。

语法：

@keyframes animationname {keyframes-selector {css-styles;}}

值	说明
animationname	必需的。定义animation的名称。由animation属性定义。
keyframes-selector	必需的。动画持续时间的百分比。合法值： 0-100% from (和0%相同) to (和100%相同) 注意：您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

值

说明

animationname

必需的。定义animation的名称。由animation属性定义。

keyframes-selector

必需的。动画持续时间的百分比。

合法值：

0-100%
from (和0%相同)
to (和100%相同)

注意：您可以用一个动画keyframes-selectors。

css-styles

必需的。一个或多个合法的CSS样式属性

“如何用css实现左右运动效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

名称栏目：如何用css实现左右运动效果
网站路径：https://www.cdcxhl.com/article16/gpgodg.html

成都网站建设公司_创新互联，为您提供品牌网站建设、网站设计公司、全网营销推广、企业网站制作、网站排名、ChatGPT

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容