本文主要是介绍前端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>
这篇关于前端css笔记:人物素材添加动态效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!