微恐连续剧
67.38M · 2026-02-05
在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;}}合法值：
0-100% from (和0%相同) to (和100%相同)
注意： 您可以用一个动画keyframes-selectors。
css-styles必需的。一个或多个合法的CSS样式属性（学习视频分享：css视频教程）
