怎么用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>
    

效果图：

说明：

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

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

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

语法：

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

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

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

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！