CSS3多图滚动切换 - 阿强爱分享

CSS3多图滚动切换

作者: Aqiang

全网最全的网络资源分享网站

手机扫码查看

标签:

CSS3代码

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!邮箱:2377724272@qq.com

多图滚动切换
写在前面的话
之前写多图切换时有童鞋建议多写写动画效果,也想和大家多多分享的,怎奈想象力不足,一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果,感觉看起来不错,遂写下来和大家分享一下。

思路
动画效果技术上严格依赖于以下几点,请大家熟练掌握,然后看下文就比较好理解了

transform 属性
animation 属性
keyframes 自定义动画规则
本文为3张图片滚动切换,每滚动一圈(360 度)有 3 个动画切换效果,0 度 -> 120 度 -> 240 度 -> 0 度;每一圈动画结束会替换首图,3 张图片都做首图总共需要 3 圈,之后整个动画完成。所以自定义动画规则中总共需要 3 * 3 = 9 个动画切换效果
首图指的是下文中 rotateY(0deg) 的动画停留效果

HTML

<div id="container">
    <img class="scroll-img" />
</div>

解析

html 中添加图片容器元素,容器中添加图片元素

CSS

<style>
#container > img {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
}

.scroll-img {
    animation: scroll 9s ease-out infinite;
}

@keyframes scroll {
    0%, 7% {
        background-image: url("111.png");
        transform: rotateY(0deg);
    }
    12%, 17% {
        background-image: url("222.png");
        transform: rotateY(120deg);
    }
    22%, 27% {
        background-image: url("333.png");
        transform: rotateY(240deg);
    }
    32%, 41% {
        background-image: url("222.png");
        transform: rotateY(0deg);
    }
    46%, 51% {
        background-image: url("333.png");
        transform: rotateY(120deg);
    }
    56%, 61% {
        background-image: url("111.png");
        transform: rotateY(240deg);
    }
    66%, 74% {
        background-image: url("333.png");
        transform: rotateY(0deg);
    }
    79%, 84% {
        background-image: url("111.png");
        transform: rotateY(120deg);
    }
    89%, 94% {
        background-image: url("222.png");
        transform: rotateY(240deg);
    }
    99%, 100% {
        background-image: url("111.png");
        transform: rotateY(0deg);
    }
}
</style>>

解析

本例通过 background-image 属性实现图片资源的切换。使用 background-image 时注意同时要设置 background-repeat 和 background-size 属性,防止图片资源过大或过小时影响界面显示
由于本例中动画切换效果较多,设置 animation 属性值时动画时长要相应加大一些
垂直方向旋转在 transform 属性值中使用 rotateY 函数,水平方向旋转使用 rotateX 函数
keyframes 自定义动画中包含两种效果:动画停留和动画切换。规则中可见区间对应的是动画停留效果,比如 0%~7%、12%~17%;除规则中标识之外的区间则对应动画切换效果,比如 7%~12%、17%~22%
可以看出 scroll 规则中有 9 个动画切换,10 个动画停留。为什么是这样呢?要注意最后一个动画停留到第一个动画停留之间也是需要有动画切换效果的,所以最后一个动画停留要和第一个动画停留效果要保持一致,这样动画重复播放时才会平稳过渡,而不是一个强切的效果
动画各阶段比例的计算
怎么计算动画停留需要多少比例,动画切换需要多少比例,肯定有不少童鞋要问这个问题了?这里专门拉个标题说明一下。

根据需求明确动画切换数量。比如本例是 3 圈旋转,每圈旋转有 3 个动画切换,所以总共是 9 个动画切换
动画停留 = 动画切换 + 1。动画切换是 9 个,所以动画停留应该是 9 + 1 = 10 个
动画停留第一个和最后一个是相同效果,所以比例是按照 n - 1 进行计算的。如本例就是 9 个
将 100 个比例用动画停留和动画效果的总和进行等分。不能够等分时看动画停留是不是有需要偏重的,像本例首图就可以多分些比例。
本例计算方法:
(1)100 ÷ (9 + 9) = 5 余 10,所以每个动画停留和动画切换都有一个基数 5
(2)将余数 10 分到 3 个首图中,不能等分就 3 + 3 + 4
(3)为了动画平稳过渡,需要将第一个动画停留比例分一小部分至最后一个动画停留。分一小部分即可,不然会影响刚开始时的动画效果
(4)所以动画各阶段比例划分如下:
第一个动画停留(第一个首图):7
第二个首图动画停留:5 + 4 = 9
第三个首图动画停留:5 + 3 = 8
最后一个动画停留(第一个首图):1
其他所有动画停留:5
所有动画切换:5

运行效果

分享到:
打赏

公告提示:本站已开放注册,欢迎投稿。
头像
站长签名: 专注分享各类源码-全网资源免费分享平台好货不私藏

文章作者信息版权声明

阅读时间:  发布于:2019-9-20

本文标题: CSS3多图滚动切换

本文链接: https://iooqp.cn/?post=407

版权声明:文章为《 Aqiang》原创,转载请保留出处! 本文共有 2203 个字!

分享到:

精彩评论

未显示?请点击刷新
切换注册

登录

您也可以使用第三方帐号快捷登录

切换登录

注册

© 2019 阿强爱分享   京ICP备19031919号-2

免责声明:本站所发布的资源信息及软件文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,本站信息来自网络,版权争议与本站无关。

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏