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); }
项目源码
了解更多,个人博客
相关推荐
重剑无锋 2020-10-25
Catastrophe 2020-05-30
AcFunJ 2019-11-18
tenvainvi 2019-11-17
ETIpiero 2019-07-12
zhanbuquan 2019-07-12
pmbdlw 2019-07-12
nhgxxyy0 2019-07-05
84251748 2019-07-05
URML 2019-07-05
quyunfei 2019-07-05
第号 2019-07-05
bailangriver 2019-07-01
YichengGu 2019-07-01
王道立心 2019-07-01
浪子huang 2019-07-01
caiselangren 2019-07-01
javaMerea 2019-07-01
dayi 2019-07-01