多图滚动切换
写在前面的话
之前写多图切换时有童鞋建议多写写动画效果,也想和大家多多分享的,怎奈想象力不足,一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果,感觉看起来不错,遂写下来和大家分享一下。
思路
动画效果技术上严格依赖于以下几点,请大家熟练掌握,然后看下文就比较好理解了
transform 属性
animation 属性
keyframes 自定义动画规则
本文为3张图片滚动切换,每滚动一圈(360 度)有 3 个动画切换效果,0 度 -> 120 度 -> 240 度 -> 0 度;每一圈动画结束会替换首图,3 张图片都做首图总共需要 3 圈,之后整个动画完成。所以自定义动画规则中总共需要 3 * 3 = 9 个动画切换效果
首图指的是下文中 rotateY(0deg) 的动画停留效果
HTML
解析
html 中添加图片容器元素,容器中添加图片元素
CSS
#container > img {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: contain;
}
.scroll-img {
animation: scroll 9s ease-out infinite;
}
@keyframes sc