宣傳頁項目開發（二）

来源:https://www.cnblogs.com/chenyingying0/archive/2020/02/10/12290918.html
-Advertisement-
Play Games

之前已經完成了靜態頁面的開發，接下來是網頁動態效果製作 css實現動畫的兩種方式： 1、transition: all 1s; 2、animation: move 1s infinite ease-in-out .5s; @keyframes move{ 0%{ transform: rotate( ...


之前已經完成了靜態頁面的開發，接下來是網頁動態效果製作

css實現動畫的兩種方式：

1、transition: all 1s;

2、animation: move 1s infinite ease-in-out .5s;

@keyframes move{

0%{ transform: rotate(0deg); }

40%{ transform: rotate(45deg); }

100%{ transform: rotate(0deg); }

}

兩種遍歷的方式，遍歷對象 { }  遍曆數組 [ ]

for(k in obj){

do (k);

}

for(var i=0; i<obj.length; i++){

do( obj[i] );

}

css動畫測試

首先新建一個animate.css專門用於存放動畫效果

.screen-1-heading{ transition:all 1s; }
.screen-1-heading-init{ opacity: 0;transform:translate(0,100%); }
.screen-1-heading-done{ opacity: 1;transform:translate(0,0); }
/*# sourceMappingURL=animate.css.map */

 

新建一個動畫測試腳本 test.js

// 需要設置動畫的元素
var animateElements={
    ".screen-1":[
        ".screen-1-heading",
        ".screen-1-phone",
        ".screen-1-shadow"
    ]
}

//設置動畫
function setAnimate(screenName){//屏的類名，如： ".screen-1"
    var screen=document.querySelector(screenName);//獲取哪一屏
    var screenEles=animateElements[screenName];//獲取該屏下要動畫的所有元素
    var isInit=false; //動畫是否初始化
    var isDone=false;//動畫是否完成

    screen.onclick=function(){
        //初始化
        if(isInit===false){
            for(var i=0,len=screenEles.length;i<len;i++){
                var newCls=screenEles[i].substr(1)+"-init";
                var screenEle=document.querySelector(screenEles[i]);//某個要動畫的元素
                var baseCls=screenEle.getAttribute("class");//獲取原來的類
                screenEle.setAttribute("class", baseCls+" "+newCls);//添加init類
            }
            isInit=true;
            return;
        }

        //完成動畫
        if(isDone===false){
            for(var i=0,len=screenEles.length;i<len;i++){            
                var screenEle=document.querySelector(screenEles[i]);//某個要動畫的元素
                var baseCls=screenEle.getAttribute("class");//獲取原來的類
                var newCls=screenEles[i].replace("-init", "-done").substr(1);
                screenEle.setAttribute("class", newCls);//添加init類
            }
            isDone=true;
            return;
        }

        //切換done到init
        if(isDone===true){
            for(var i=0,len=screenEles.length;i<len;i++){            
                var screenEle=document.querySelector(screenEles[i]);//某個要動畫的元素
                var baseCls=screenEle.getAttribute("class");//獲取原來的類
                var newCls=screenEles[i].replace("-done", "-init").substr(1);
                screenEle.setAttribute("class", newCls);//添加init類
            }
            isDone=false;
            return;
        }
    }

}

setAnimate(".screen-1");

補充：給容器設置overflow: hidden;   

可以保證元素在進行動畫的過程中，不會占用別的屏的空間

div 可以添加hover偽類製作動畫，但是為了更好的相容性，建議外面加上a標簽，display設置為block，來添加hover 效果

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="animate.css">
</head>
<body>
    <!-- 頭部 -->
    <header>
        <div class="header-wrap">
            <div class="header-logo">微課手機</div>
            <nav class="header-nav">
                <a href="javascript:void(0);" class="header-nav-item header-nav-item-active">外觀</a>
                <a href="javascript:void(0);" class="header-nav-item">配置</a>
                <a href="javascript:void(0);" class="header-nav-item">型號</a>
                <a href="javascript:void(0);" class="header-nav-item">說明</a>
                <a href="javascript:void(0);" class="header-nav-item">其他產品</a>
                <a href="javascript:void(0);" class="header-nav-item header-nav-item-button">立即購買</a>
            </nav>
    </header>
    <!-- 第一屏 -->
    <div class="screen-1">
        <h2 class="screen-1-heading"><span>微課手機</span> 讓你的生活更精彩</h2>
        <div class="screen-1-phone"></div>
        <div class="screen-1-shadow"></div>
    </div>
    <!-- 第二屏 -->
    <div class="screen-2">
        <div class="screen-2-wrap">
            <h2 class="screen-2-heading">優美的設計，更令人著迷</h2>
            <h4 class="screen-2-subheading">採用受歡迎的設計，讓它更加出色。<br>
款式小巧、輕便手感更舒適。絢麗高清的顯示屏，整個外觀顯得格外精緻。</h4>
            <div class="screen-2-phone">
                <div class="screen-2-point screen-2-point-i1">高清攝像</div>
                <div class="screen-2-point screen-2-point-right screen-2-point-i2">超薄機身</div>
                <div class="screen-2-point screen-2-point-right screen-2-point-i3">大屏顯示</div>
            </div>
        </div>
    </div>
    <!-- 第三屏 -->
    <div class="screen-3">
        <div class="screen-3-wrap">
            <h2 class="screen-3-heading">優美的設計，更令人著迷</h2>
            <h4 class="screen-3-subheading">採用受歡迎的設計，讓它更加出色。<br>
款式小巧、輕便手感更舒適。絢麗高清的顯示屏，整個外觀顯得格外精緻。</h4>
            <div class="screen-3-phone"></div>
            <div class="screen-3-detail">
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">5.7</div>
                    <div class="screen-3-detail-desc">英寸大屏</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">1200</div>
                    <div class="screen-3-detail-desc">萬像素</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">3D</div>
                    <div class="screen-3-detail-desc">Touch</div>
                </div>
                <div class="screen-3-detail-item">
                    <div class="screen-3-detail-num">A9</div>
                    <div class="screen-3-detail-desc">處理器</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第四屏 -->
    <div class="screen-4">
        <div class="screen-4-wrap">
            <h2 class="screen-4-heading">豐富的手機型號</h2>
            <h4 class="screen-4-subheading">找到適合你的手機</h4>
            <div class="screen-4-phone">
                <div class="screen-4-phone-item screen-4-phone-i1">
                    <div class="screen-4-phone-color">微課紅</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i2">
                    <div class="screen-4-phone-color">土豪金</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i3">
                    <div class="screen-4-phone-color">太空灰</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
                <div class="screen-4-phone-item screen-4-phone-i4">
                    <div class="screen-4-phone-color">紳士黑</div>
                    <div class="screen-4-phone-model">32G/64G/138G</div>
                </div>
            </div>
        </div>
    </div>
    <!-- 第五屏 -->
    <div class="screen-5">
        <h2 class="screen-5-heading">游戲、學習、拍照，有這一部就夠了</h2>
        <h4 class="screen-5-subheading">    看視頻、拍攝高清視頻與照片、視頻聊天、通話相結合，一機多功能，讓您生活更豐富精彩。
        </h4>
        <div class="screen-5-bg"></div>
    </div>
    <!-- 第六屏 -->
    <div class="screen-6">
        <button class="screen-6-btn">立即購買</button>
    </div>
    <!-- 底部 -->
    <footer>© 2020&nbsp;&nbsp;test.com&nbsp;&nbsp;浙ICP備00000000號</footer>

    <script src="test.js"></script>
</body>
</html>

base.css

*{
    margin:0;
    padding:0;
}

a{
    text-decoration: none;
    color:#44484d;
}

ul{
    list-style:none;
}

body{
    color:#44484d;
}

h2{
    font-size:48px;
    font-weight:lighter;
    padding-top:81px;
    padding-bottom:15px;
}

h4{
    font-size:16px;
    line-height:30px;
    font-weight:normal;
    padding-bottom:15px;
}

/*# sourceMappingURL=base.css.map */

style.css

/*頭部*/
header{
    background:#f7f7f7;
    width:100%;
    height:80px;
}
.header-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
}
.header-logo{
    width:140px;
    height:39px;
    margin-left:24px;
    background:url(img/logo.png) left center no-repeat;
    background-size:39px 39px;
    text-indent:51px;
    line-height:39px;
    position: absolute;
    top:50%;
    margin-top:-20px;
    font-size:20px;
}
.header-nav{
    position: absolute;
    right:24px;
    height:39px;
    line-height:39px;
    top:50%;
    margin-top:-20px;
    font-size:14px;
}
.header-nav-item{
    display: block;
    float:left;
    margin-left:45px;
}
.header-nav-item-active{
    color:#f04747;
    position: relative;
}
.header-nav-item-active::after{
    content:"";
    display: block;
    height:2px;
    width:100%;
    position: absolute;
    top:39px;
    left:0;
    background-color: #f04747;
}
.header-nav-item-button{
    width:90px;
    height:39px;
    background-color:#07111b;
    color:#f4f4f5;
    text-align: center;
    border-radius:3px;
}

/*第一屏*/
.screen-1{
    width:100%;
    height:795px;
    background:url(img/screen-1-bg.png) no-repeat;
    background-size:cover;
    text-align: center;
    position: relative;
}
.screen-1-heading{
    padding-top:138px;
    padding-bottom:94px;
    color:#4d555d;
}
.screen-1-heading span{
    color:#f04747;
}
.screen-1-phone{
    background:url(img/screen-1-phone.png) center no-repeat;
    width:1375px;
    height:305px;
    left:50%;
    margin-left:-687px;
    position: absolute;
    bottom:180px;
    z-index:2;
}
.screen-1-shadow{
    background:url(img/screen-1-shadow.png) center no-repeat;
    width:1183px;
    height:367px;
    left:50%;
    margin-left:-591px;
    position: absolute;
    bottom:30px;
    z-index:1;
}

/*第二屏*/
.screen-2{
    width:100%;
    height:800px;
    background:#fafafa;
}
.screen-2-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    text-align: center;
    position: relative;
    overflow:hidden;
}
.screen-2-heading{
    color:#f04747;
}
.screen-2-subheading{
    color:#4d555d;
}
.screen-2-phone{
    background:url(img/screen-2-phone.png) center no-repeat;
    width:928px;
    height:530px;
    left:50%;
    margin-left:-464px;
    position: absolute;
    bottom:0;
}
.screen-2-point{
    font-weight:lighter;
    width:104px;
    padding-right:97px;
    background:url(img/screen-2-point-left.png) center right no-repeat;
    position: absolute;
}
.screen-2-point-right{
    padding-right:0;
    padding-left:97px;
    background:url(img/screen-2-point-right.png) center left no-repeat;
}
.screen-2-point-i1{
    top:160px;
    left:-153px;
}
.screen-2-point-i2{
    top:40px;
    right:150px;
}
.screen-2-point-i3{
    top:340px;
    right:40px;
}

/*第三屏*/
.screen-3{
    width:100%;
    height:800px;
    background:#fafafa;
    background:url(img/screen-3-bg.png) no-repeat;
    background-size:cover;
    position: relative;
}
.screen-3-wrap{
    width:1200px;
    padding:0 50px;
    height:100%;
    margin:0 auto;
    position: relative;
    color:#fff;    
    overflow:hidden;
}
.screen-3-phone{
    background:url(img/screen-3-phone.png) top right no-repeat;
    width:767px;
    height:576px;
    right:0;
    position: absolute;
    bottom:0;
}
.screen-3-detail{
    margin-top:152px;
    width:333px;
}
.screen-3-detail-item{
    width:140px;
    height:127px;
    border:1px solid #cd6d6f;
    float:left;
    border-radius:3px;
    margin-right:24px;
    text-align: center;
    margin-bottom:18px;
}
.screen-3-detail-num{
    font-size:48px;
    line-height:48px;
    padding-top:24px;
}
.screen-3-detail-desc{
    padding-top:5px;
}

/*第四屏*/
.screen-4{
    width:100%;
    height:800px;
}
.screen-4-wrap{
    width:1200px;
    height:100%;
    margin:0 auto;
    position: relative;
    text-align: center;
    z-index:2;
}
.screen-4-heading{
    padding-top:120px;
    padding-bottom:21px;
    color:#f04747;
}
.screen-4-subheading{
    padding-bottom:55px;
}
.screen-4-phone{
    width:1148px;
    height:355px;
}
.screen-4-phone-item{
    width:218px;
    height:355px;
    margin-right:92px;
    float:left;
    background:url(img/screen-4-phone.png) -26px top no-repeat;
}
.screen-4-phone-i1{
    background-position:-25px 0;
}
.screen-4-phone-i2{
    background-position:-301px 0;
}
.screen-4-phone-i3{
    background-position:-574px 0;
}
.screen-4-phone-i4{
    background-position:-846px 0;
    margin-right:0;
}
.screen-4-phone-color{
    padding-top:307px;
    font-size:16px;
}
.screen-4-phone-model{
    padding-top:9px;
    font-size:12px;
    color:#d8dadc;
}

/*第五屏*/
.screen-5{
    width:100%;
    height:800px;    
    background-color: #d9dde1;
    text-align: center;
    position: relative;
    overflow:hidden;
}
.screen-5-heading{
    padding-top:120px;
    padding-bottom:21px;
    color:#f04747;
}
.screen-5-subheading{
    padding-bottom:55px;
}
.screen-5-bg{
    width:1918px;
    height:433px;
    position: absolute;
    bottom:0;
    left:50%;
    margin-left:-959px;
    background:url(img/screen-5-bg.png) center no-repeat;
}

/*第六屏*/
.screen-6{
    width:100%;
    height:202px;
    background-color: #d9ddd1;
    background:url(img/screen-6-bg.png);
    text-align: center;
    padding-top:118px;
}
.screen-6-btn{
    width:243px;
    height:78px;
    line-height:78px;
    text-align: center;
    background:#f01414;
    color:#fff;
    border-radius:3px;
    font-size:24px;
    font-weight:lighter;
    border:none;
    box-shadow:0 0 10px rgba(0,0,0,.5);
    display: inline-block;
    cursor:pointer;
}

/*底部*/
footer{
    text-align: center;
    color:#fff;
    width:100%;
    height:80px;
    line-height:80px;
    background-color: #07111b;
    font-size:12px;
    font-weight:lighter;
}
/*# sourceMappingURL=style.css.map */

animate.css

/*第一屏*/
.screen-1-heading{ transition:all 1s; }
.screen-1-heading-init{ opacity: 0;transform:translate(0,100%); }
.screen-1-heading-done{ opacity: 1;transform:translate(0,0); }

.screen-1-phone{ transition:all 1s; }
.screen-1-phone-init{ opacity: 0;transform:translate(0,-100%); }
.screen-1-phone-done{ opacity: 1;transform:translate(0,0); }

.screen-1-shadow{ transition:all 1s; }
.screen-1-shadow-init{ opacity: 0;transform:translate(0,-100%); }
.screen-1-shadow-done{ opacity: 1;transform:translate(0,0); }

/*第二屏*/
.screen-2-heading{ transition:all 1s; }
.screen-2-heading-init{ opacity:
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Druid入門（1）—— 快速入門實時分析利器-Druid_0.17
    一、安裝準備 本次安裝的版本是截止2020.1.30最新的版本0.17.0 軟體要求 需要 Java 8（8u92 +） 以上的版本，否則會有問題 Linux，Mac OS X或其他類似Unix的操作系統（不支持Windows） 硬體要求 Druid包括一組參考配置和用於單機部署的啟動腳本： 單服務 ...
  • 【React Native】某個頁面禁用物理返回鍵
    1、引入組件 import { BackHandler, } from 'react-native'; 2、添加監聽 componentDidMount(): void { BackHandler.addEventListener('hardwareBackPress', this.onBackBu ...
  • JavaScript面向對象編程
    在前端開發中，JavaScript並沒有想象中那麼簡單，不只是簡單的UI輸入驗證，還有面向對象。對於剛剛JavaScript入門的你來說，可能會稍稍驚訝：哇，雖然前端開發好找對象，但是JavaScript真的可以向對象編程麽！！！是的，你沒有看錯，本文將通過一些小例子，逐步講解JavaScript的... ...
  • JS數據類型和堆棧+變數比較和值的複製+參數傳遞和類型檢測
    變數命名 變數名：字母 數字 下劃線 美元符$ jquery: $ $.each() $ jQuery underscore( js的一個函數庫) : _ _.each() 關鍵字 : if for 保留字 : class 推薦有意義的命名： buttonCancel button_cancel b ...
  • vue父子組件雙向數據綁定
    在有些情況下，我們可能需要對一個 prop 進行“雙向綁定”。不幸的是，真正的雙向綁定會帶來維護上的問題，因為子組件可以修改父組件，且在父組件和子組件都沒有明顯的改動來源。 所以就推薦以update:myPropName 的模式觸發事件取而代之。舉個例子，在一個包含 title prop 的假設的組 ...
  • 兩種存儲思路
    存儲一張圖片，常見兩種思路： 1. 存儲 寬高、每個像素的 RGBA 值——點陣圖 1. 存儲 寬高、每個幾何圖形——矢量圖 一張圖片，如果幾何圖形關係明確，用矢量圖來存儲，不但空間占用少，而且信息比點陣圖全。因為點陣圖沒有表達出幾何圖形的關係，在縮放時點陣圖只好失真。 同理，存儲一系列數據時： 1. 如果 ...
  • Vue 實現動態路由及登錄&404頁面跳轉控制&頁面刷新空白解決方案
    Vue實現動態路由及登錄&404頁面跳轉控制&頁面刷新空白解決方案 by:授客 QQ：1033553122 開發環境 Win 10 Vue 2.9.6 node-v10.15.3-x64.msi 下載地址： https://nodejs.org/en/ 代碼片段(router/index.js) 說 ...
  • 宣傳頁項目開發（三）
    網頁交互效果的實現 滾動條高度的獲取以及設置：document.body.scrollTop || document.documentElement.scrollTop .split() 把字元串分割成數組 .join() 把數組轉為字元串 .replace( /\s+/g, " ") 正則全局替換 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類