怎么用css实现左右运动效果-木庄网络博客

2022-02-25 00:42:30 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者青灯夜游，侵删。

在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>