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

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

前言

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

第一步——抠图

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

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

 通过 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>