• 技术文章 >web前端 >css教程

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

    青灯夜游青灯夜游2021-07-14 17:45:14原创96

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

    效果图:

    1.gif

    说明:

    使用@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样式属性

    (学习视频分享:css视频教程

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

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:css
    上一篇:css怎么设置文本框宽度 下一篇:纯CSS如何实现血轮眼+轮回眼特效(代码详解)
    第16期线上培训班

    相关文章推荐

    • css3跟css区别是什么• css继承样式有哪些• css3中的rem怎么用• css中tag是什么意思• css中浮动是什么意思• css怎么实现超出高度隐藏

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网