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:素材自己去截图切

查看全文

相关阅读:
司马光王安石
 辛弃疾
 伯仲叔季
 三国时代
 西汉东汉三国（曹魏蜀汉东吴）
数量关系练习题
 为什么不推荐使用外键约束
 Google Map API申请
 Android传感器——加速度传感器
 第三届空间信息智能服务研讨会

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