用CSS来实现一些动画在vue中使用之几个物体上下浮动（1）

最新推荐文章于 2023-06-05 08:34:54 发布

sing__star

最新推荐文章于 2023-06-05 08:34:54 发布

阅读量842

点赞数 1

本文链接：https://blog.csdn.net/qq_44774831/article/details/115585356

版权

vue.js 专栏收录该内容

36 篇文章 5 订阅

订阅专栏

1.三个物体上下浮动的效果

具体代码:

<div class="center">
      <a class="list fn_1 moveUpDownFla1" href="...">
        <p>系统一</p>
      </a>
      <a class="list fn_2 moveUpDownFla2" href="...">
        <p>系统二</p>
      </a>
      <a class="list fn_3 moveUpDownFla1" href="...">
        <p>系统三</p>
      </a>
    </div>

/*style中添加*/
      .center .list{
        display: block;
        float: left;
        margin: 0 30px;
      }
      .fn_1{
        width: 250px; height: 220px;
        background: url(images/fn_1.png);
        background-size: cover;
      }
      .fn_1:hover{
        background: url(images/fn_1_h.png);
        background-size: cover;
      }

      .fn_2{
        width: 250px; height: 220px;
        background: url(images/fn_2.png);
        background-size: cover;
      }
      .fn_2:hover{
        background: url(images/fn_2_h.png);
        background-size: cover;
      }

      .fn_3{
        width: 250px; height: 220px;
        background: url(images/fn_3.png);
        background-size: cover;
      }
      .fn_3:hover{
        background: url(images/fn_3_h.png);
        background-size: cover;
      }
.moveUpDownFla1 {
	animation: moveUpDown 5s ease infinite;
}
.moveUpDownFla2 {
	animation: moveUpDown 4s linear infinite;
}
/* 菜单动画 */
@keyframes moveUpDown {
	0% {
		transform: translate(0px, -20px)
	}
	50% {
		transform: translate(0px, 20px)
	}
	100% {
		transform: translate(0px, -20px);
	}
}