CSS3制作360切换屏幕显示每屏动画>>全屏插件使用及过渡案例

Ron韦斯莱

于 2019-04-19 16:49:33 发布

阅读量412

点赞数 1

本文链接：https://blog.csdn.net/qq_43537987/article/details/89403669

版权

这篇博客介绍了如何利用CSS3制作360度屏幕切换动画，分享了一个全屏插件的下载链接，并提供了详细的使用说明。案例展示了屏幕切换时的过渡效果，通过在afterLoad事件中为当前屏幕添加包含过渡效果的current样式来实现。

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

首先先分享一下全屏插件：
链接：https://pan.baidu.com/s/164Ki7sIpxq-3fL4OIdqy0A
提取码：qph0
使用介绍：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .first.current h3{
            font-size: 100px;
        }
        /*交集选择器：h3当当前元素同时添加了second和current的时候才会有效果*/
        .second.current h3{
            font-size: 100px;
        }
    </style>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/jquery.fullPage.min.js"></script>
</head>
<body>
<div id="dowebok">
    <!--每一个section就是一屏-->
    <div class="section first">
        <h3>第一屏</h3>
    </div>
    <div class="section second">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
    <div class="section">
        <h3>第5屏</h3>
    </div>
</div>
<script>
    $(function(){
        $('#dowebok').fullpage({
            /*设置每一屏的背景色*/
            sectionsColor:["red","green","blue","pink","skyBlue"],
            /*当滚动到某一屏之后调用
            * index:当前屏的索引，索引从1开始*/
            afterLoad:function(anchorLink,index){
                /*将其它屏的current标记移除*/
                $(".section").removeClass("current");
		        alert(index);
                /*添加样式,当滚动到某一屏之后，为元素添加样式--标记*/
                $(".s