图片上下或左右浮动动画

最新推荐文章于 2022-03-18 15:36:37 发布

weixin_30745553

最新推荐文章于 2022-03-18 15:36:37 发布

阅读量477

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/w1991/p/7054074.html

版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>上下浮动</title>
</head>
<style>
*{padding:0;margin:0;}
.demo{
width:160px;
margin:0px auto;
animation:Updown 1s infinite alternate;
-webkit-animation:Updown 1s alternate infinite;/*infinite无限播放，alternate轮流反向播放*/
}

@keyframes Updown{
from{margin-top:30px;}
to{margin-top:10px;}
}
@-webkit-keyframes Updown{
from{margin-top:30px;}
to{margin-top:10px;}
}

</style>
<body>

<div class="demo">
<img src="http://cdn.attach.w3cfuns.com/notes/pics/201605/08/125958m7p71pthtcq8uwto.png"/>
</div>

</body>
</html>

转载于:https://www.cnblogs.com/w1991/p/7054074.html

优惠劵

weixin_30745553

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片上下或左右浮动动画

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta htt...
复制链接

扫一扫