成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

frolc / 2918人閱讀

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

項(xiàng)目展示

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

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

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

第一步：通過CSS3 的transform屬性移動(dòng)文字，樣式如下 
        .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%);
    }

第三步：鼠標(biāo)經(jīng)過，修改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://systransis.cn/yun/117493.html

相關(guān)文章

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

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

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

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

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

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

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

    摘要：使用組件將根據(jù)視口放置，并滑過頁面。這意味著我們不能使用狀態(tà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)論

最新活動(dòng)
閱讀需要支付1元查看
<