纯css3.0打造具有绚丽视差滚动的图片切换

最新推荐文章于 2023-04-03 10:51:03 发布

追追呢

最新推荐文章于 2023-04-03 10:51:03 发布

阅读量941

点赞数 1

分类专栏： css3 文章标签： css3 视差滚动-图片切换视差滚动 css3动画

本文链接：https://blog.csdn.net/qq_34800114/article/details/55518296

版权

本文介绍了如何使用纯CSS3.0实现视差滚动的图片切换效果，无需JavaScript。通过讲解视差滚动的概念和结构，详细阐述了如何利用`:checked`选择器、`<input>`与`<label>`的关联，以及CSS3.0的`~`选择器和`transition`属性，创建出具有层次感和流畅动画的图片切换和背景动画。整个实现过程注重浏览器兼容性和代码的优雅性。

摘要由CSDN通过智能技术生成

用纯css实现这款banner切换，在摒弃了定时器效果下，加上滚动视差感堪称完美。
效果预览

这里写图片描述

先来剖析：
什么是视差滚动？
视差滚动（Parallax Scrolling）是指多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。
视差滚动的结构可以分成：背景层、内容层和悬浮层(贴图层)。悬浮层和背景层可为多层，能实现更为细腻的视差感，为了结构清晰，我们当前效果是各为一层。
了解了视差，新的问题迎面而来：
如何脱离js有效的去控制图片切换及背景动画？
在无任何js下能够传递状态的首先就能想到表单元素：，可以使用:checked选择器选择被选中的元素。想清楚了这一点就开始动手搭建结构，毕竟很多时候思路比代码重要。
先放上完整结构代码：

        <div class="vie_main">
            <input type="radio" name="i" class="page_1" id="p_1"  checked="checked"/>
            <input type="radio" name="i" class="page_2" id="p_2" />
            <input type="radio" name="i" class="page_3" id="p_3" />
            <label for="p_1" class="btn_b1"></label> 
            <label for="p_2" class="btn_b2"></label>
            <label for="p_3" class="btn_b3"></label>
            <div class="vie_list">
                <div class="vie_bg"></div>
                <ul>
                    <li>
                        <img src="images/bn1.png" class="banner1"/>
                        <img src="images/bn1-1.png" class="bn bnbg1"/>
                    </li>
                    <li>
                        <img src="images/bn2.png" class="banner2"/>
                        <img src="images/bn2-2.png" class="bn bnbg2"/>
                    </li>
                    <li>
                        <img src="images/bn3.png" class="banner3" />
                        <img src="images/bn3-3.png" class="bn bnbg3"/>
                    </li>
                </ul>
            </div>
        </div>