html怎么让图片上下移动

htML让图片上下移动的方法：1、使用animation属性给图片绑定一个移动动画；2、使用“@keyframes 动画名称 { 50%{ transform:translateY(移动距离); } } ”语句定义动画每一帧的动作，控制图片上下移动。

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

在html中，可以利用animation属性和“@keyframes”创建一个图片上下移动的动画；动画中使用transform:translateY()控制图片移动。

实现代码：

!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 {
				50% {
    					transform: translateY(100px);
				}
			}
			@-webkit-keyframes mymove/* Safari and Chrome */			{
				50% {
    					transform: translateY(100px);
				}
			}
    		/style>
    	/head>
    	body>
    		div>
    /div>
    	/body>
    /html>
    

推荐教程：《html视频教程》

以上就是html怎么让图片上下移动的详细内容，更多请关注其它相关文章！

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