CSS文字交錯滑動效果-001

frolc 發布于2019-08-30 15:56 / 2900人閱讀

摘要：項目展示技術難點引用解釋是中引用的元素的屬性名稱。實例輸出初始樣式基本每個人都會忽略第一步通過的屬性移動文字，樣式如下第二步通過的屬性引用的元素的屬性名稱脫離文檔流第三步鼠標經過，修改屬性就行項目源碼了解更多，個人博客

項目展示

技術難點：

引用MDN解釋：content: attr(data-text);是CSS中引用的HTML元素的屬性名稱。

實例： HTML

p data-foo="hello">world

CSS

[data-foo]::before {
  content: attr(data-foo) " ";
}

輸出 //hello world

初始樣式：基本每個人都會（忽略）

第一步：通過CSS3 的transform屬性移動文字，樣式如下

        .box span:nth-child(odd) {
            transform: translateY(-100%);
        }

        .box span:nth-child(even) {
            transform: translateY(100%);
        }

第二步：通過content 的arr屬性引用的HTML元素的屬性名稱

        N      //html
        .box span::before {
        content: attr(data-text);
        position: absolute;     // 脫離文檔流
        color: red;
    }
        .box span:nth-child(odd)::before {
        transform: translateY(100%);
    }

    .box span:nth-child(even)::before {
        transform: translateY(-100%);
    }

第三步：鼠標經過，修改transform屬性就行

    .box:hover span {
        transform: translateY(0);
    }

項目源碼 了解更多，個人博客

云服務器 GPU云服務器滑動效果 css滑動 IOS滑動抽屜效果文字效果

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117493.html

CSS文字交錯滑動效果-001

摘要：項目展示技術難點引用解釋是中引用的元素的屬性名稱。實例輸出初始樣式基本每個人都會忽略第一步通過的屬性移動文字，樣式如下第二步通過的屬性引用的元素的屬性名稱脫離文檔流第三步鼠標經過，修改屬性就行項目源碼了解更多，個人博客項目展示 showImg(https://segmentfault.com/img/remote/1460000018450816?w=517&h=120); 技術難點...

aisuhua 2019-08-02 14:28 評論0 收藏0
前端每日實戰：1# 視頻演示如何用純 CSS 創作一個按鈕文字滑動特效

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。源代碼下載請從下載。 showImg(https://segmentfault.com/img/bVbfmCW?w=400&h=301); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepe...

Eric 2019-08-29 15:08 評論0 收藏0
前端每日實戰：1# 視頻演示如何用純 CSS 創作一個按鈕文字滑動特效

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。源代碼下載請從下載。 showImg(https://segmentfault.com/img/bVbfmCW?w=400&h=301); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepe...

時飛 2019-08-02 10:15 評論0 收藏0
使用Angular4動畫為頁面添彩

摘要：使用組件將根據視口放置，并滑過頁面。這意味著我們不能使用狀態來對路由組件進行樣式，因為這樣可以將樣式應用于父結點我們的示例中的主元素，而不是路由組件。原文：Angular?—?Supercharge your Router transitions using new animation features (v4.3+) 首先我們看一下效果展示的demo Basic Variation...

jay_tian 2019-08-20 18:24 評論0 收藏0