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);
	}
複製程式碼

專案原始碼

瞭解更多，個人部落格