CSS文字交错滑动效果-001

ゝ一纸荒年。 2022-10-01 11:41 284阅读 0赞

### 项目展示 ###

### 技术难点： ###

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

### [项目源码][Link 1] ###

### [了解更多，个人博客][Link 2] ###

转载于:https://juejin.im/post/5c84bcce6fb9a049ad77dd47

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fqqlcx5%2FlearnCSS%2Ftree%2Fmaster%2F001-button-text-staggered-sliding-effects
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fqqlcx5%2Fblog

发表评论取消回复

表情：

评论列表（有 0 条评论，284人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 文字左右抖动效果

【代码】css 文字左右抖动效果。

柔情只为你懂/ 2024年04月22日 15:23/ 0 赞/ 184 阅读

相关 css文字阴影----渐渐模糊效果

text-shadow 为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和

我不是女神ヾ/ 2023年02月18日 11:58/ 0 赞/ 323 阅读

相关文字烟雾效果 html+css+js

先看效果（源码在最后）： ![在这里插入图片描述][20210506134953132.gif_pic_center] 网上看到了这个效果，觉得很有趣，所以也实现下，

蔚落/ 2023年01月18日 12:25/ 0 赞/ 313 阅读

相关 css文字底部阴影效果

今天要实现一个文字的阴影效果，大概是这个样子的 ![在这里插入图片描述][2020092216472561.png_pic_center] 代码如下： <!DO

￡神魔★判官ぃ/ 2022年12月09日 13:59/ 0 赞/ 448 阅读

相关 CSS文字交错滑动效果-001

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

ゝ一纸荒年。/ 2022年10月01日 11:41/ 0 赞/ 285 阅读

相关纯CSS3文字效果推荐

前端开发whqet,csdn,王海庆,whqet,前端开发专家之前曾经研究过几个纯css实现的文字效果，《[CSS文字条纹阴影动画][CSS]》和《[响应式奶油立体字效果]

小灰灰/ 2022年08月27日 03:21/ 0 赞/ 360 阅读

相关【CSS+DIV】设置文字效果

一、文字样式 1、字体、大小、颜色、粗细、斜体 <span style="font-family:KaiTi_GB2312;font-size:18px

Bertha 。/ 2022年07月16日 10:18/ 0 赞/ 447 阅读

相关 CSS-文字效果

1.1、自定义字体: <!doctype html> <html lang="en"> <head> <meta charset="

逃离我推掉我的手/ 2022年07月15日 10:30/ 0 赞/ 506 阅读

相关 css滑动门效果，文字两侧背景花纹自适应

css滑动门效果：不同长度的文字，两侧的背景图案一致，如下图所示。效果预览： ![70][] 素材图片：t2.jpg ![70 1][] 源代码如下： <

深藏阁楼爱情的钟/ 2022年05月08日 07:56/ 0 赞/ 278 阅读

相关 css实现文字竖排效果

html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。

朱雀/ 2020年04月28日 06:21/ 0 赞/ 1107 阅读