animation控制图片从左飞入右飞入顶飞入等动态

最新推荐文章于 2023-03-06 19:34:10 发布

v多好多好

最新推荐文章于 2023-03-06 19:34:10 发布

阅读量1.2k

点赞数

本文链接：https://blog.csdn.net/qq_44939874/article/details/89645581

版权

本文展示了如何使用CSS动画实现图片从左侧、右侧和顶部飞入的动态效果。关键在于设置适当的animation属性和transform: scale()来控制图片的缩放与移动，适用于网页动态设计。

摘要由CSDN通过智能技术生成

先看从左边和右边飞入的效果：
这里写图片描述
图片的html代码是：

<div class="travelType">                  <img class="page5-tu1" src="./images/p5_tu1.png" name="travel1"/>                  <img class="page5-tu2" src="./images/p5_tu2.png" name="travel2"/>                  <img class="page5-tu3" src="./images/p5_tu3.png" name="travel3"/>                  <img class="page5-tu4" src="./images/p5_tu4.png" name="travel4"/></div>
  
  
  
   1
   2
   3
   4
   5
   6

重要的样式代码是：

@keyframes bounceInLeft {        from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}        0% {
    opacity: 0;transform: translate3d(-3000