利用<div>层和<img>标签，实现一个图片两个动画效果

最新推荐文章于 2023-09-22 01:03:53 发布

快雪时晴天

最新推荐文章于 2023-09-22 01:03:53 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5/CSS3 文章标签： html5 动画

本文链接：https://blog.youkuaiyun.com/hlbt0112/article/details/43670677

HTML5/CSS3 专栏收录该内容

12 篇文章

订阅专栏

本文介绍如何使用HTML5和CSS3创建动态效果，包括图片层的移动路径和尺寸变化，实现从左上到右下的放大及抖动效果，再过渡到右上到左下的运动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：令一枚图片先“从左上到右下”放大并“抖动”，再从“右上到左下”一直运动下去。

技术：html5 + css3

实现：

1、通过动画属性，改变图片所在<div>层的大小：

#div_cloud{
position: relative;
-webkit-animation: cloud_infinite_move 2s infinite;		
}

@-webkit-keyframes cloud_infinite_move{

0%{ top: 0px;left: 0px;}
50%{ top: -10px;left: 10px;}
100%{ top: 0px;left: 0px;}<span style="font-family: Arial, Helvetica, sans-serif;">}</span>

2、通过动画效果，改变<img>本身的效果：

#div_cloud{
position: relative;
-webkit-animation: cloud_infinite_move 2s infinite;
}

@-webkit-keyframes topcloud_show{<span style="font-family: Arial, Helvetica, sans-serif;">0%{width: 10px; height: 10px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">50%{width: 40px; height: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">75%{width: 36px; height: 36px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">85%{top: 40px;left: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">90%{top: 36px;left: 36px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">100%{top: 40px;left: 40px;}</span><span style="font-family: Arial, Helvetica, sans-serif;">}</span>