zoukankan html css js c++ java

利用全屏滚动插件和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{
         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 {
         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 {
         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 {
         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 {
         631px;
        height: 278px;
        background: url(../images/info_3.png);
    }

    .third .circle {
         453px;
        height: 449px;
        background: url(../images/circle.png);
        animation:rot 4s infinite linear;
    }

    .third .rocket {
        position: absolute;
        bottom: 0;
        left: 0;
         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 {
         529px;
        height: 320px;
        position: relative;
        transform: translateX(-100%);
    }

    .fourth .input {
         529px;
        height: 66px;
        background: url(../images/search.png);
    }

    .fourth .key {
        position: absolute;
        left: 20px;
        top: 24px;
         0;
        /* 100px;*/
        height: 22px;
        background: url(../images/key.png) left center no-repeat;
    }

    .fourth .wrap {
         529px;
        height: 393px;
        transform: translateY(-13px);
        overflow: hidden;
    }

    .fourth .result {
         100%;
        height: 100%;
        background: url(../images/result.png) no-repeat;
        transform: translateY(-100%);
    }

    .fourth .info {
         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;
        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 {
         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;
         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;
         100%;
        border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    }

    .fifth .box {
        position: absolute;
        left: 70px;
        top: 32px;
         0;
        /* 920px;*/
        height: 27px;
        overflow: hidden;
    }

    .fifth .box span {
        display: block;
         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;
         394px;
        height: 29px;
        background: url(../images/extra.png);
        opacity: 0;
    }

    .fifth .line {
         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;
        920px;

    }

    .fifth.current .toolbar,
    .fifth.current .extra{
        transition:all 1s 1.7s;
        opacity: 1;
    }

ps:素材自己去截图切

查看全文

相关阅读:
jQuery 基本选择器
 JavaScriptif while for switch流程控制 JS函数内置对象
 JavaScrip基本语法
 数据库存储引擎表的操作数值类型时间类型字符串类型枚举集合约束
 数据库基础知识管理员用户登录授权的操作
 粘包的产生原理以及如何解决粘包问题
 socket TCP DPT 网络编程
 2018年年终总结
 Android技术分享
 No accelerator found

原文地址：https://www.cnblogs.com/lonelyGentleman/p/6764336.html