CSS文字交错滑动效果-001

项目展示技术难点：引用MDN解释：content:attr(data-text);是CSS中引用的HTML元素的属性名称。示例：HTMLpdata-foo="hello">world

CSS[data-foo]::before{content:attr(data-foo)"";}输出//helloworld初始样式：基本上每个人都会(忽略）第一步：通过CSS3的transform属性移动文字，样式如下boxspan:nth-child(odd){transform:translateY(-100%);}.boxspan:nth-child(even){transform:translateY(100%);}第二步：content的arr属性引用的HTML元素的属性名N//html.boxspan::before{content:attr(data-text);位置：绝对；//文档流外color:red;}.boxspan:nth-child(odd)::before{transform:translateY(100%);}.boxspan:nth-child(even)::before{transform:translateY(-100%);}第三步：修改鼠标经过时的transform属性即可。box:hoverspan{transform:translateY(0);}项目源码更多信息，个人博客