前端css笔记：人物素材添加动态效果

Cakndex

已于 2023-09-15 00:37:06 修改

阅读量316

点赞数 1

文章标签：前端 css 笔记

于 2023-09-15 00:28:36 首次发布

本文链接：https://blog.csdn.net/Lyy_ID/article/details/132892999

版权

前言

对于网上的一张白底动漫人物图片，倘若就这么放在自己的页面中未免显得突兀。接下来我们进行几个操作让它在页面中更有特点

第一步——抠图

首先，选择一个好的抠图软件，这里推荐佐糖，是个免费的抠图网站，且功能强大。

第二步——将图片放在自己的页面中

通过 overflow:hidden 以及对其位置，宽高的调整，放在页面中合理的位置

这个时候，会觉得静态页面过于枯燥，为了提升用户视觉效果，我们需要让页面中的人物素材动起来

第三步——为人物素材添加动画

.container{
  overflow:hidden //父容器添加
}
.pic{
  width: 1000px;
  height: 1000px;
  position: absolute;
  left: -10%;
  bottom: -40%;
  opacity: 0.9;
  animation-delay: 2s;
  animation: moveUpDown 3s linear infinite;
}
//为人物添加上下移动的动画
@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}

利用自定义animation的方法为人物素材添加动画效果

注意：animation效果和transform不能同时生效！例：
.pic{
    animation: moveUpDown 3s linear infinite;
    transfrom:translateY(5px)
}
//只会执行下面的transfrom效果
但是在自定义的动画里面利用transfrom去变化是没问题的

最终效果为：

拓展

那如果我既想要实现人物的不断移动，还想要添加hover效果使其向左平移呢?

有一个好办法是：

为这个图片外层裹一个div，在div上添加hover效果

代码如下：

<style>
    .container{
        position: relative;
        left: 200px;
        width: 500px;
        height: 500px;
        transition: all 0.5s ease-out//平移更平滑
    }
    .container:hover{
        transform: translateX(-100px);
    }
    .pic{
        width: 100%;
        height: 100%;
        animation-delay: 2s;
        animation: moveUpDown 3s linear infinite;
    }
@keyframes moveUpDown {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(5px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
<div class="container">
    <img class="pic" src="img/pic.png" alt="">
</div>