红枫 发表于 2021-6-11 16:12

《镜花倩影》 css图片移动特效

<div style="POSITION: relative; WIDTH: 900px; TOP: 5px; LEFT: 5px">






<style type="text/css">

#container {
        width: 500px;
        height:500px;
        overflow: hidden;
}

#photo {
        width: 5000px;
        animation: switch 40s ease-out infinite;
}


#photo > img {
        float: left;
        width:500px;
        height: 500px;
}




@keyframes switch {
        0%, 4% {
        margin-left: 0;
        }
        10%, 14% {
        margin-left: -500px;
        }
        20%, 24% {
                margin-left: -1000px;
        } 30%, 34%   {
        margin-left: -1500px;
        }
40%, 44%   {
        margin-left: -2000px;
        }
50%, 54%   {
        margin-left: -2500px;
        }
60%, 64%   {
        margin-left: -3000px;
        }
70%, 74% {
   margin-left: -3500px;
        }
80%, 84%   {
        margin-left: -4000px;
        }
90%, 94%   {
        margin-left: -4500px;
        }


}





</style>



<div>

<img src="http://pan.yinhuabbs.cn/view.php/3d070d820308c3e78cb20bbf113575d5.jpg">

</div>






<div id="container" style="position: absolute;left: 280px; top: 500px; ">
    <div id="photo">
      <img src="http://pan.yinhuabbs.cn/view.php/7e639de5b73417401aa848938bfb7a72.jpg">
      <img src="http://pan.yinhuabbs.cn/view.php/59b9a87cf95b8984ca1b6782c5cb7e90.jpg">
      <img src="http://pan.yinhuabbs.cn/view.php/1b6ef58d00740c0ab79855fd0aacb57c.jpg">

      <img src="http://pan.yinhuabbs.cn/view.php/c5ad769ca9528e8e7b31cb48ec8fe184.jpg">
      <img src="http://pan.yinhuabbs.cn/view.php/95fa82e0d7dc4fb92efc54eb77dc5ea3.jpg">
      <img src="http://pan.yinhuabbs.cn/view.php/8405dc17b2df56a94be32a84027a6031.jpg">

      <img src="http://pan.yinhuabbs.cn/view.php/fc06c5d9a2ac5b47845a56e1b5cf8836.jpg">
      <img src="http://pan.yinhuabbs.cn/view.php/b1231a4757536d20ff0bfc73295efbe5.jpg">
      <img src="http://pan.yinhuabbs.cn/view.php/2471964af49d36dbbceeb0a237ff9515.jpg">

      <img src="http://pan.yinhuabbs.cn/view.php/a19f7de7f41bf817f0214447412cde2f.jpg">

    </div>
</div>








<div style="position: absolute;left:350px; top:150px; ">

<img src="https://z3.ax1x.com/2021/07/16/WM1gCF.gif" width="100%" height="100%">

</div>


<div style="position: absolute;left:100px; top:920px; ">

<img src="https://z3.ax1x.com/2021/07/17/WlAEtA.gif" width="85%" height="85%">

</div>





    <div style="position: absolute;left: 0px; top: 0px; ">
<img src="http://pan.yinhuabbs.cn/view.php/814400577ad482906ee0bef637c87b47.png" width="50%" height="80%"></div>



<div style="position: absolute;left: 350px; top: 1350px; ">
<img src="https://z3.ax1x.com/2021/07/17/WlVNeU.gif" width="90%" height="90%"></div>


<div style="position: absolute;left: 650px; top: 1350px; ">
<img src="https://z3.ax1x.com/2021/07/16/WMQtVf.gif" width="40%" height="40%"></div>

<div style="position: absolute;left: 350px; top: 1320px; ">
<img src="https://z3.ax1x.com/2021/07/16/WMQu5D.gif" width="50%" height="50%">



</div>

<div style="position: absolute;left: 820px; top: 1300px; ">

<img src="http://pan.yinhuabbs.cn/view.php/411c75ede8b0b124fc2243f7e7393d40.png" width="150%" height="150%">

</div>



<div id="container" style="position: absolute;left: 280px; top: 500px; ">
<img src="http://pan.yinhuabbs.cn/view.php/2e606ff7e357b03419b650bf96c12c98.png" width="500px" height="500px">

</div>

<div style="position: absolute;left: -00px; top: 300px; ">


<img src="http://www.yinhuabbs.cn/data/attachment/album/202206/21/155155f32kos28t2d7b2to.gif" width="110%" height="110%">



</div>



<audio src="http://music.163.com/song/media/outer/url?id=340858.mp3" loop="loop"   ="" autoplay="autoplay"></audio>





</div>

195400 发表于 2021-6-11 21:35

http://www.yinhuabbs.cn/data/attachment/forum/201912/23/081932efdaeebejfcgdclj.gif

红枫 发表于 2021-6-11 22:23

195400 发表于 2021-6-11 21:35


感谢赞赏，还得多向您学习和请教！！

明月佳妮 发表于 2021-6-11 22:31

雄鹰翱翔 发表于 2021-6-12 04:26

欣赏佳作，赞一个！

寒冬残荷 发表于 2021-6-13 00:47

欣赏学习了

诺北 发表于 2021-6-13 16:39

楼主可以重新编辑一下试试看，第五楼华妹的代码我编辑去掉了，你看看效果重新编辑能不能出来

红枫 发表于 2021-6-13 17:11

谢谢诺北管理员，谢谢雄鹰版主！！

诺北 发表于 2021-6-13 17:21

红枫 发表于 2021-6-13 17:11
谢谢诺北管理员，谢谢雄鹰版主！！

不用客气，叫诺北就行，等着欣赏你的代码作品啊

诺北 发表于 2021-6-13 17:22

做的很漂亮，图片的移动让整张帖子更加生动美丽
页: [1] 2 3
查看完整版本: 《镜花倩影》 css图片移动特效