CSS文字交錯滑動效果-001

項目展現

技術難點：

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

實例：

HTML

p data-foo="hello">world</p>

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元素的屬性名稱

<span data-text="N">N</span>      //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);
    }

項目源碼

瞭解更多，我的博客