利用全屏滚动插件和h5c3实现仿360开机动画
HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>360</title> <link rel="stylesheet" href="./css/main.css"> </head> <body> <div id="fullpage"> <!-- 第一屏 --> <div class="section first"> <!-- LOGO --> <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="info"></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="info"></div> </div> <!-- 第三屏 --> <div class="section third"> <!-- 信息 --> <div class="info"></div> <!-- 圆环 --> <div class="circle"></div> <!-- 火箭 --> <div class="rocket"></div> </div> <!-- 第四屏 --> <div class="section fourth"> <!-- 搜索 --> <div class="search"> <div class="key"></div> <div class="input"></div> <div class="wrap"> <div class="result"></div> </div> </div> <!-- 信息 --> <div class="info"></div> </div> <!-- 第五屏 --> <div class="section fifth"> <!-- 信息 --> <div class="info"></div> <!-- 浏览器 --> <div class="broswer"> <!-- 四边框 --> <div class="leftline"></div> <div class="topline"></div> <div class="rightline"></div> <div class="bottomline"></div> <!-- 工具栏 --> <div class="toolbar"></div> <!-- 边框盒子 --> <div class="box"> <span></span> </div> <div class="line"></div> <!-- 其它 --> <div class="extra"></div> </div> </div> </div> <script src="./js/jquery.min.js"></script> <script src="./js/jquery.fullPage.min.js"></script> <script> $('#fullpage').fullpage({ // 设置背景色 sectionsColor : ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'], afterLoad: function (anchorLink, index) { $('.section').removeClass('current'); // 延时100毫秒执行 setTimeout(function () { $('.section').eq(index - 1).addClass('current'); }, 100); } }); </script> </body> </html>
css:
*{ margin: 0; padding: 0; } /*动画 测试*/ h3{ width: 200px; height: 100px; background-color: red; transition:all 0.5s; transform:translateX(-1000px); } .section.current h3{ transform:translateX(500px) translateY(400px); } .section{ overflow: hidden; position: relative; } /*第一屏*/ .first { padding-top: 80px; } .first .logo { width: 251px; height: 186px; margin: 0 auto; background-image: url(../images/logo.png); } .first .text { text-align: center; line-height: 1; margin: 85px 0 45px; } .first img { margin: 0 24px; opacity: 0; } .first .info { height: 49px; background: url(../images/info_1.png) center center no-repeat; } /* 第一屏的动画*/ .first.current img{ /*过渡 入场需要过渡 ，出场快速..*/ transition:all 1s; margin: 0 10px; opacity: 1; } /*第二屏*/ .second { padding: 0 100px; } .second > div { display: flex; justify-content: space-between; align-items: center; } .second .shield { width: 428px; height: 498px; } .second img { display: block; float: left; } .second img:nth-child(1) { transform: translate(35px, 78px) rotate(45deg); } .second img:nth-child(2) { transform: translate(135px, 282px) rotate(15deg); } .second img:nth-child(3) { transform: translate(187px, 62px) rotate(15deg); } .second img:nth-child(4) { transform: translate(10px, 162px) rotate(30deg); } .second img:nth-child(5) { transform: translate(465px, 522px) rotate(30deg); } .second img:nth-child(6) { transform: translate(480px, 62px) rotate(90deg); } .second img:nth-child(7) { transform: translate(180px, -305px) rotate(80deg); } .second img:nth-child(8) { transform: translate(300px, -22px) rotate(70deg); } .second img:nth-child(9) { transform: translate(280px, -322px) rotate(60deg); } .second .info { width: 635px; height: 309px; background: url(../images/info_2.png); } /*动画*/ .second.current img{ /* 过渡*/ transition:all 1s; /* 复位*/ transform: translate(0px, 0px) rotate(0deg); } /*第三屏*/ .third { padding: 0 60px; } .third > div { display: flex; justify-content: space-between; align-items: center; } .third .info { width: 631px; height: 278px; background: url(../images/info_3.png); } .third .circle { width: 453px; height: 449px; background: url(../images/circle.png); animation:rot 4s infinite linear; } .third .rocket { position: absolute; bottom: 0; left: 0; width: 204px; height: 204px; background: url(../images/rocket.png); transform: translate(500px, 210px); } /*动画*/ .third.current .rocket{ /* 过渡*/ transition:all 1s; transform: translate(1111px, -280px); } @keyframes rot { 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } } /*第四屏*/ .fourth { padding: 0 85px; } .fourth > div { display: flex; justify-content: space-between; align-items: center; overflow: hidden; } .fourth .search { width: 529px; height: 320px; position: relative; transform: translateX(-100%); } .fourth .input { width: 529px; height: 66px; background: url(../images/search.png); } .fourth .key { position: absolute; left: 20px; top: 24px; width: 0; /*width: 100px;*/ height: 22px; background: url(../images/key.png) left center no-repeat; } .fourth .wrap { width: 529px; height: 393px; transform: translateY(-13px); overflow: hidden; } .fourth .result { width: 100%; height: 100%; background: url(../images/result.png) no-repeat; transform: translateY(-100%); } .fourth .info { width: 612px; height: 299px; background: url(../images/info_4.png); } /*动画模块*/ .fourth.current .search{ /*过渡*/ transition:all 1s; transform: translateX(0px); } .fourth.current .key{ /*过渡*/ transition:all 2s steps(5) 1s; width:99px; } .fourth.current .result{ transition:all 1s 3s; transform: translateY(0); } /*第五屏*/ .fifth { /*padding-top: 30px;*/ } .fifth > div { display: flex; flex-direction: column; } .fifth .info { height: 135px; margin: 30px 0; background: url(../images/info_5.png) center center no-repeat; } .fifth .broswer { width: 1004px; margin: 0 auto; flex: 1; background-color: rgba(255, 255, 255, 0.15); position: relative; } .fifth .toolbar { height: 80px; background: url(../images/toolbar.png) left bottom no-repeat; position: relative; opacity: 0; } .leftline, .topline, .rightline, .bottomline { position: absolute; border-color: rgba(255, 255, 255, 0.5); } .leftline { left: 0; height: 100%; border-left: 1px solid rgba(255, 255, 255, 0.5); transform: translateY(-100%); opacity: 0; } .topline { top: 0; width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.5); transform: translateX(100%); opacity: 0; } .rightline { right: 0; height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.5); transform: translateY(100%); opacity: 0; } .bottomline { bottom: 0; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.5); } .fifth .box { position: absolute; left: 70px; top: 32px; width: 0; /*width: 920px;*/ height: 27px; overflow: hidden; } .fifth .box span { display: block; width: 100%; height: 100%; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 3px; box-sizing: border-box; } .fifth .extra { position: absolute; right: 0; bottom: 0; width: 394px; height: 29px; background: url(../images/extra.png); opacity: 0; } .fifth .line { width: 100%; position: absolute; bottom: 30px; border-top: 1px solid rgba(255, 255, 255, 0.5); } /* 动画*/ /* 第一步：三条边 出现*/ .fifth.current .leftline, .fifth.current .rightline{ /*过渡*/ transition:all 1s; transform: translateY(0); opacity: 1; } .fifth.current .topline{ /*过渡*/ transition:all 1s; transform: translateX(0); opacity: 1; } /* 第二部 工具栏 出现*/ .fifth.current .box{ transition:all 1s 1.2s; width:920px; } .fifth.current .toolbar, .fifth.current .extra{ transition:all 1s 1.7s; opacity: 1; }
ps:素材自己去截图切
