JavaScript >> Javascript 文檔 >  >> Tags >> CSS

帶有 CSS 3D 變換的類似 Apple 的登錄表單

嘿,你知道你可以用 CSS3 翻轉 3D 空間中的元素嗎?您可能應該這樣做,因為這已經有將近兩年的時間了。最初只在 Webkit 瀏覽器中 - Safari 和 Chrome,但現在也在 Firefox 中。這意味著世界上超過一半的人(使用非 IE 瀏覽器)可以看到高級的、CSS 驅動的動畫和效果。

在本教程中,我們將了解如何使用這些變換在受 Apple 啟發的表單上創建有趣的翻轉效果。

更新: 你可以在 Epic Bootstrap 找到另一個很棒的登錄表單。

理念

我們將有兩種形式——登錄和密碼恢復,一次只能看到一種。單擊鏈接(示例中的功能區)將觸發 Y 軸上的 CSS3 旋轉,這將顯示另一個具有翻轉效果的表單。

我們將使用 jQuery 來監聽鏈接上的點擊,並在表單的容器元素上添加或刪除一個類名。使用 CSS,我們將應用 rotateY 兩種形式的轉換(水平旋轉),但 180 度 區別取決於這個類。這將使表格出現在假想平台的相對兩側。為了使過渡動畫化,我們將使用 CSS 過渡屬性。

標記

我們需要兩種形式 - login恢復 .每個表單都有一個提交按鈕和文本/密碼輸入:

index.html

        <div id="formContainer">
            <form id="login" method="post" action="./">
                <a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
                <input type="text" name="loginEmail" id="loginEmail" placeholder="Email" />
                <input type="password" name="loginPass" id="loginPass" placeholder="Password" />
                <input type="submit" name="submit" value="Login" />
            </form>
            <form id="recover" method="post" action="./">
                <a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
                <input type="text" name="recoverEmail" id="recoverEmail" placeholder="Your Email" />
                <input type="submit" name="submit" value="Recover" />
            </form>
        </div>

請注意表單中元素的 ID。我們將在 CSS 部分廣泛使用它們。一次只能看到其中一種形式。另一個將在翻轉動畫期間顯示。每個表單都有一個 flipLink 錨。單擊此按鈕將切換(添加或刪除)翻轉 #formContainer 上的類名 div,這又會觸發 CSS3 動畫。

jQuery 代碼

第一個重要步驟是確定當前瀏覽器是否完全支持 CSS3 3D 變換。如果沒有,我們將提供一個後備(表單將直接切換)。我們還將使用 jQuery 來監聽 flipLink 上的點擊 錨。由於我們不會為這些表單構建實際的後端,因此我們還需要防止它們被提交。

以下是完成上述所有操作的代碼:

assets/js/script.js

$(function(){

    // Checking for CSS 3D transformation support
    $.support.css3d = supportsCSS3D();

    var formContainer = $('#formContainer');

    // Listening for clicks on the ribbon links
    $('.flipLink').click(function(e){

        // Flipping the forms
        formContainer.toggleClass('flipped');

        // If there is no CSS3 3D support, simply
        // hide the login form (exposing the recover one)
        if(!$.support.css3d){
            $('#login').toggle();
        }
        e.preventDefault();
    });

    formContainer.find('form').submit(function(e){
        // Preventing form submissions. If you implement
        // a backend, you will want to remove this code
        e.preventDefault();
    });

    // A helper function that checks for the
    // support of the 3D CSS3 transformations.
    function supportsCSS3D() {
        var props = [
            'perspectiveProperty', 'WebkitPerspective', 'MozPerspective'
        ], testDom = document.createElement('a');

        for(var i=0; i<props.length; i++){
            if(props[i] in testDom.style){
                return true;
            }
        }

        return false;
    }
});

為方便起見,檢查 3D CSS3 支持的功能被提取到單獨的輔助函數中。它檢查對透視屬性的支持,這使我們的演示有深度。

我們現在可以進入 CSS 部分了。

CSS

CSS 將處理從表單和表單元素的呈現到動畫效果和過渡的所有內容。我們將從表單容器樣式開始。

assets/css/styles.css

#formContainer{
    width:288px;
    height:321px;
    margin:0 auto;
    position:relative;

    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
}

還有一個寬度 , 身高 , 邊距定位 ,我們也設置了視角 的元素。此屬性為舞台提供了深度。沒有它,動畫會顯得平淡(嘗試禁用它以了解我的意思)。值越大,消失點越遠。

接下來我們將給表單設置樣式。

#formContainer form{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;

    /* Enabling 3d space for the transforms */
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    /* When the forms are flipped, they will be hidden */
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* Enabling a smooth animated transition */
    -moz-transition:0.8s;
    -webkit-transition:0.8s;
    transition:0.8s;

    /* Configure a keyframe animation for Firefox */
    -moz-animation: pulse 2s infinite;

    /* Configure it for Chrome and Safari */
    -webkit-animation: pulse 2s infinite;
}

#login{
    background:url('../img/login_form_bg.jpg') no-repeat;
    z-index:100;
}

#recover{
    background:url('../img/recover_form_bg.jpg') no-repeat;
    z-index:1;
    opacity:0;

    /* Rotating the recover password form by default */
    -moz-transform:rotateY(180deg);
    -webkit-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

我們首先描述兩種形式之間共享的共同樣式。在此之後,我們添加了區分它們的獨特樣式。

背面可見性 屬性很重要,因為它指示瀏覽器隱藏表單的背面。否則,我們最終會得到恢復表單的鏡像版本,而不是顯示登錄表單。使用 rotateY(180deg) 實現翻轉效果 轉型。它從右向左旋轉元素。正如我們已經聲明了一個 transition 屬性,每次旋轉都會平滑動畫。

注意關鍵幀 聲明在表單部分的底部。這定義了一個重複(由 infinite 關鍵字)關鍵幀動畫,不依賴於用戶交互。動畫的CSS描述如下:

/* Firefox Keyframe Animation */
@-moz-keyframes pulse{
    0%{     box-shadow:0 0 1px #008aff;}
    50%{    box-shadow:0 0 8px #008aff;}
    100%{   box-shadow:0 0 1px #008aff;}
}

/* Webkit keyframe animation */
@-webkit-keyframes pulse{
    0%{     box-shadow:0 0 1px #008aff;}
    50%{    box-shadow:0 0 10px #008aff;}
    100%{   box-shadow:0 0 1px #008aff;}
}

每個百分比組對應於動畫中的一個時間點。當它重複時,盒子陰影會呈現為柔和的脈動光。

現在讓我們看看點擊鏈接後會發生什麼,flipped 類被添加到 #formContainer

#formContainer.flipped #login{

    opacity:0;

    /**
     * Rotating the login form when the
     * flipped class is added to the container
     */

    -moz-transform:rotateY(-180deg);
    -webkit-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}

#formContainer.flipped #recover{

    opacity:1;

    /* Rotating the recover div into view */
    -moz-transform:rotateY(0deg);
    -webkit-transform:rotateY(0deg);
    transform:rotateY(0deg);
}

翻轉的類導致 #login#recover div 旋轉 180 度。這使得#login 表單消失。但由於#recover 已經背對著我們,它會顯示而不是隱藏。

這裡的不透明度聲明只是對 Android 瀏覽器中的一個錯誤的修復,它忽略了 backface-visibility 屬性並顯示表單的翻轉版本而不是隱藏它們。通過此修復,除了桌面瀏覽器之外,動畫甚至可以在 Android 和 iOS 上運行。

完成!

CSS 3D 轉換為各種有趣的效果打開了大門,這些效果曾經只用於大型 Flash 網頁。現在我們可以擁有輕量級、可爬取和語義化的網站,這些網站既好看又能為劣質瀏覽器提供適當的回退。


Tutorial JavaScript 教程
  1. 我的新 Discord 服務器

  2. JavaScript 中的有趣事實

  3. 為什麼我不會使用 React Hooks

  4. 如何使用 JavaScript 和 NodeMailer 構建聯繫表單

  5. 輕鬆本地化:讓您的工作更快的 7 個技巧

  6. 如何使用 JavaScript 向元素添加 CSS 類

  7. 如何編碼蛇🐍

  1. Eager Force - Kells 終於開始學習 ReactJS

  2. 不能將 margin-right 應用於相對定位的元素

  3. 通過 setInterval 事件調用類原型方法

  4. 如何等待“調整大小”事件的“結束”然後才執行操作?

  5. Vercels pkg - 將您的 Node.js 應用程序打包成一個可執行文件

  6. 2020 年前端路線圖

  7. Angular 中的 TDD - HTTP 測試基礎

  1. 如何在你的 React TypeScript 應用程序中使用 Redux

  2. 使用 Mongo DB Atlas 的事件電子郵件提醒

  3. SnowFS ❄️ 讓我們為圖形項目帶來版本控制

  4. 在 React 中創建延遲承諾掛鉤