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);
	}
复制代码

项目源码

了解更多，我的博客