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

本文链接：https://blog.youkuaiyun.com/qq_43537987/article/details/89403669

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先先分享一下全屏插件：
链接：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);
                /*添加样式,当滚动到某一屏之后，为元素添加样式--标记*/
                $(".section").eq(index-1).addClass("current");
            }
        });
    });
</script>
</body>
</html>

案例效果展示：
在这里插入图片描述
思路：
当发生afterLoad事件时，给当前屏添加current样式，该样式中包含着过渡效果。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="js/jquery.min.js"></script>
    <script src="js/jquery.fullPage.min.js"></script>
    <style>
		* {
			margin: 0;
			padding: 0;
		}
		.section {
			overflow: hidden;
		}
		.first {
			padding: 80px;
		}
		.first .logo {
			width: 251px;;
			height: 200px;
			background: url("images/logo.png") 0 0 no-repeat;
			margin:0 auto;
		}
		.first .text {
			width: 100%;
			text-align: center;
			margin-top:30px; 
		}
		.first .text img {
			margin: 0 20px;
			opacity: 0.3;
			transition:margin 2s,opacity 2s;
		}
		.first.current .text img {
			margin: 0 5px;
			opacity: 1;
		}
		.first .intro {
			width: 100%;
			height: 100px;
			background:  url("images/info_1.png") 0 0 no-repeat;
			margin-top:20px;
			background-position: center; 
		}
		.second .shield {
			width: 440px;
			font-size:0;
			/*图片默认基线对齐，为了使图片间缝隙变小可以使用fontsize*/
			margin-top:80px; 
		}
		.second .intro {
			width: 600px;
			height: 100%;
			background:  url("images/info_2.png") 0 0 no-repeat;
			margin-top:130px; 

		}
		.second > div {
			display: flex;
			justify-content:space-around;
		}
		
		.second .shield > img:nth-of-type(1){
		    transform: translate(100px,100px) rotate(30deg);
		}
		.second .shield > img:nth-of-type(2){
		    transform: translate(-100px,-100px) rotate(-30deg);
		}
		.second .shield > img:nth-of-type(3){
		    transform: translate(200px,200px) rotate(60deg);
		}
		.second .shield > img:nth-of-type(4){
		    transform: translate(-200px,-200px) rotate(-60deg);
		}
		.second .shield > img:nth-of-type(5){
		    transform: translate(150px,150px) rotate(90deg);
		}
		.second .shield > img:nth-of-type(6){
		    transform: translate(50px,150px) rotate(-90deg);
		}
		.second .shield > img:nth-of-type(7){
		    transform: translate(-150px,-150px) rotate(60deg);
		}
		.second .shield > img:nth-of-type(8){
		    transform: translate(10px,-250px) rotate(-90deg);
		}
		.second .shield > img:nth-of-type(9){
		    transform: translate(-250px,10px) rotate(45deg);
		}
		.second img{
		    transition: transform 1s;
		} 
		.second.current .shield img {
			transform:none;
		}


		.thrid {
			position: relative;
		}
		.info {
			height: 278px;
   			width: 631px;
			position: absolute;
			background: url("images/info_3.png") 0 0 no-repeat;
			top:50%;
			left: 50%;
			transform:translate(-100%,-50%);
		}
		.circle {
			height: 449px;
		    width: 453px;
		    position: absolute;
		    background: url("images/circle.png");
		    top:50%;
			right: 50%;
			transform:translate(120%,-50%);

		}
		.rocket {
			 height: 204px;
			 width: 203px;
			 background: url("images/rocket.png");
			 position: absolute;
			 top:600px;
			 left: -600px; 
			 transition:all 2s;
			
			 
		}
		.thrid.current .rocket {
			top:50%;
			left: 50%;
			transform:translate(-50%,-50%); 
		}
		.fourth {
			position: relative;
		}
		.search {
			width: 529px;
			height: 438px;
			position: absolute;
			top:50%;
			left:50%;
			transform:translate(10%,-50%);
		}
		.searchBar {
			width: 0;
			height: 66px;
 			background: url("images/search.png");
			transition:width 2s;
		}
		.searchText{
		    width: 0px;
		    height: 22px;
		    background: url("images/key.png");
		    position: absolute;
		    top:22px;
			left:15px;
			transition:width 2s 2s steps(5);
		}
		.searchResult{
			width: 529px;
			height: 0;
			background: url("images/result.png");
			margin-top:-12px;
			transition:height 2s linear 5s;
		}
		.fourth .info {
			width: 612px;
		    height: 299px;
		    background: url("images/info_4.png");
		}	
		.fourth.current .searchBar{
			width: 529px;
		} 
		.fourth.current .searchText{
			width: 99px;
		} 
		.fourth.current .searchResult{
			height: 372px;
		} 
    </style>
</head>
<body>
	<div id="dowebok">
	    <div class="section first">
	    	<div class="logo"></div>
	    	<div class="text">
	            <img src="images/text_1.png" alt="">
	            <img src="images/text_2.png" alt="">
	            <img src="images/text_3.png" alt="">
	            <img src="images/text_4.png" alt="">
	            <img src="images/text_5.png" alt="">
	            <img src="images/text_6.png" alt="">
	            <img src="images/text_7.png" alt="">
	            <img src="images/text_8.png" alt="">
	        </div>
	        <div class="intro"></div>
	    </div>
	    <div class="section second">
	    	<div class="shield">
	    		<img src="images/shield_1.png" alt="">
	            <img src="images/shield_2.png" alt="">
	            <img src="images/shield_3.png" alt="">
	            <img src="images/shield_4.png" alt="">
	            <img src="images/shield_5.png" alt="">
	            <img src="images/shield_6.png" alt="">
	            <img src="images/shield_7.png" alt="">
	            <img src="images/shield_8.png" alt="">
	            <img src="images/shield_9.png" alt="">
	    	</div>
			<div class="intro"></div>
	    </div>
	    <div class="section thrid">
	        <div class="info"></div>
	        <div class="circle">
	        	<div class="rocket"></div>
	        </div>
	    </div>
	    <div class="section fourth">
	    	<div class="search">
	    		<div class="searchBar"></div>
		    	<div class="searchText"></div>
		    	<div class="searchResult"></div>	
	    	</div>
	    	<div class="info"></div>
	    </div>
	</div>
    <script>
		$(function(){
		        $('#dowebok').fullpage({
		            /*设置每一屏的背景色*/
		            sectionsColor:['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
		            /*滚动到某一屏之后的回调
		            * index:当前屏的索引，索引从1开始*/
		            afterLoad:function(anchorLink,index){
		            	$(".section").removeClass("current");
		                setTimeout(function(){
			                    /*当滚动到某一个屏之后，添加样式标记*/
			                    $(".section").eq(index-1).addClass("current");},500);
            		}
		        });
		    });

    </script>

</body>
</html>