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

本文介绍如何使用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>





 


.slideshow li { position: relative; overflow: hidden; } .slidebar li { background: rgba(0, 0, 0, 0.3); color: #FFF; overflow: hidden; } .slidebar { position: absolute; top: 5px; left: 4px; } .slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; } .slidebar li.on { background: rgba(255, 255, 255, 0.5); color: #000; font-weight: 700; } #slideImgs li { width: 960px; height: 373px; display: none; }<div class="left3"> <div class="cl"> <ul class="slideshow" id="slideImgs"> <li><a href="#" target="_blank"></a><img src="img/微信图片_20250618161602.jpg" alt="" class="st5" /> </li> <li><a href="#" target="_blank"></a><img src="img/微信图片_20250618161609.jpg" alt="" class="st5" /> </li> <li><a href="#" target="_blank"></a><img src="img/微信图片_20250618161616.jpg" alt="" class="st5" /> </li> <li><a href="#" target="_blank"></a><img src="img/微信图片_20250618164204.png" alt="" class="st5" /> </li> <li><a href="#" target="_blank"></a><img src="img/微信图片_20250618164156.png" alt="" class="st5" /> </li> <li><a href="#" target="_blank"></a><img src="img/微信图片_20250618164149.png" alt="" class="st5" /> </li> </ul> </div> <div class="slidebar" id="slideBar"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> <script type="text/javascript"> SlideShow(1000); < !--设置切换图片的时间间隔, 默认为1000毫秒-- > </script> </div>
06-22
<!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> <link rel="stylesheet" type="text/css" href="stylesheets/index.css"> </head> <script src="js/jquery-1.4.4.min.js"></script> <script src="js/slides.min.jquery.js"></script> <script> $(function(){ $('#slides').slides({ preload: true, preloadImage: 'images/loading.gif', play: 5000, pause: 2500, hoverPause: true, animationStart: function(){ $('.caption').animate({ bottom:-35 },100); }, animationComplete: function(current){ $('.caption').animate({ bottom:0 },200); if (window.console && console.log) { // example return of current slide number console.log(current); }; } }); }); </script> <body bgcolor="#000000"> <div id="page"> <div id="top"> < img src="images/logo.jpg" width="169" height="100" align="left" /> < img src="images/logo2.jpg" /> </div> <div id="nav"><p>首页 作品展示 服装展示 外景展示 新闻动态 关于我们</p ></div> <div class="main" align="center"> <div id="container"> <div id="example"> <div id="slides"> <div class="slides_container"> <div> < img src="images/1.jpg" width="570" height="270" alt="Slide 1"> </div> <div> < img src="images/2.jpg" width="570" height="270" alt="Slide 2"> </div> <div> < img src="images/3.jpg" width="570" height="270" alt="Slide 3"> </div> <div> < img src="images/4.jpg" width="570" height="2
06-10
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值