CSS文字交错滑动效果-001

项目展示

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

初始样式:基本每个人都会(忽略)

CSS文字交错滑动效果-001

第一步:通过CSS3 的transform属性移动文字,样式如下

.box span:nth-child(odd) {
            transform: translateY(-100%);
        }

        .box span:nth-child(even) {
            transform: translateY(100%);
        }

CSS文字交错滑动效果-001

第二步:通过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%);
    }

CSS文字交错滑动效果-001

第三步:鼠标经过,修改transform属性就行

.box:hover span {
        transform: translateY(0);
    }

项目源码

了解更多,个人博客

CSS文字交错滑动效果-001

相关推荐