国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

CSS文字交錯(cuò)滑動(dòng)效果-001

aisuhua / 2430人閱讀

摘要：項(xiàng)目展示技術(shù)難點(diǎn)引用解釋是中引用的元素的屬性名稱(chēng)。實(shí)例輸出初始樣式基本每個(gè)人都會(huì)忽略第一步通過(guò)的屬性移動(dòng)文字，樣式如下第二步通過(guò)的屬性引用的元素的屬性名稱(chēng)脫離文檔流第三步鼠標(biāo)經(jīng)過(guò)，修改屬性就行項(xiàng)目源碼了解更多，個(gè)人博客

項(xiàng)目展示

技術(shù)難點(diǎn)：

引用MDN解釋?zhuān)?b>content: attr(data-text);是CSS中引用的HTML元素的屬性名稱(chēng)。

實(shí)例： HTML 
p data-foo="hello">world
CSS 
[data-foo]::before {
  content: attr(data-foo) " ";
}
輸出 //hello world
初始樣式：基本每個(gè)人都會(huì)（忽略）

第一步：通過(guò)CSS3 的transform屬性移動(dòng)文字，樣式如下 
        .box span:nth-child(odd) {
            transform: translateY(-100%);
        }

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

第二步：通過(guò)content 的arr屬性引用的HTML元素的屬性名稱(chēng) 
        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%);
    }

第三步：鼠標(biāo)經(jīng)過(guò)，修改transform屬性就行 
    .box:hover span {
        transform: translateY(0);
    }
項(xiàng)目源碼 了解更多，個(gè)人博客

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/53822.html

相關(guān)文章

  • CSS文字交錯(cuò)滑動(dòng)效果-001

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

    frolc 評(píng)論0 收藏0

  • 前端每日實(shí)戰(zhàn)：1# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)按鈕文字滑動(dòng)特效

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

    Eric 評(píng)論0 收藏0

  • 前端每日實(shí)戰(zhàn)：1# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)按鈕文字滑動(dòng)特效

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

    時(shí)飛 評(píng)論0 收藏0

  • 使用Angular4動(dòng)畫(huà)為頁(yè)面添彩

    摘要：使用組件將根據(jù)視口放置，并滑過(guò)頁(yè)面。這意味著我們不能使用狀態(tài)來(lái)對(duì)路由組件進(jìn)行樣式，因?yàn)檫@樣可以將樣式應(yīng)用于父結(jié)點(diǎn)我們的示例中的主元素，而不是路由組件。 原文：Angular?—?Supercharge your Router transitions using new animation features (v4.3+) 首先我們看一下效果展示的demo Basic Variation...

    jay_tian 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<