admin 管理员组文章数量: 888388
HTML背景图片动画设置,CSS 背景图加载完成后的过渡动画
直接给背景图设置动画效果会出现图片因加载过慢而显示效果不佳的情况，可以通过 JavaScript 来获取图片的加载状态。
下面来实现一个背景图片透明度渐变的效果。
首先来设置要添加背景动画的元素样式
main#background {
width: 100%;
height: 100%;
opacity: 0;
background-size: cover;
animation-delay: 0s;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timing-function: ease;
}
通过 opacity: 0; 来设置背景图片加载完成之前元素的状态为不可见，这样就能够避免加载过程时的图片卡顿
通过 animation-fill-mode: forwards; 来设置元素停留在动画完成后的样式，即透明度为 1，元素状态为可见
下面来定义动画
@keyframes fadein {
0% { opacity: 0; }
100% { opacity: 1; }
}
动画效果为透明度从 0 到 1
接下来通过 js 来获取图片的加载状况
var background = new Image();
background.src = '.jpeg';
background.onload = function () {
console.log('Background load complete!');
var loadbackground = document.getElementById('background');
loadbackground.style.backgroundImage = 'url(' + background.src + ')';
loadbackground.style.animationName = 'fadein';
}
首先来创建一个图片对象
通过 src 属性来设置图片的链接地址
为图片对象添加 onload 回调函数，图片加载完成将调用此函数，所以我们将在此函数中实现元素的过渡动画
获取到将要设置背景图片的元素
通过 style 属性来设置该元素的背景图片及动画名
通过以上设置我们便能够实现背景图片的过渡效果了！
完整代码：
本文结束，感谢阅读！
本文标签： HTML背景图片动画设置 CSS 背景图加载完成后的过渡动画
版权声明：本文标题：HTML背景图片动画设置,CSS 背景图加载完成后的过渡动画 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1693582099h230541.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论