專案展示
技術難點：
引用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);
}
複製程式碼