怎么用css实现左右运动效果

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

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

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

代码示例：

<!DOCTY PE  html>
<html>
<head>
< ;m eta charset="utf-8"> 
<style> 
div
{
	width:100px;
	h ei ght:100px;
	background: red ;
	pos IT ion:relative;
	animation:mymove 5s infinite;
	- webkit -animation:mymove 5s infinite; /*Safari and Ch rom e*/
}

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

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

<div></div>

</body>
</html>

效果图：

说明：

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

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

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

语法：

@keyframes animationname {keyframes -s elector {css-styles;}}

值说明

animationname

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

keyframes-selector

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

合法值：

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

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

css-styles

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

（学习视频分享：css视频教程）

以上就是怎么用css实现左右运动效果的详细内容，更多请关注其它相关文章！

总结

以上是为你收集整理的怎么用css实现左右运动效果全部内容，希望文章能够帮你解决怎么用css实现左右运动效果所遇到的问题。

如果觉得网站内容还不错，推荐好友。

查看更多关于怎么用css实现左右运动效果的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did200017

更新时间：2023-04-27 阅读：29次