css利用attr()函数 - 实现文字移动效果

更新日期: 2022-05-11阅读量: 135标签: 函数

attr()函数介绍

css表达式 attr() 用来获取选择到的元素的某一html属性值,并用于其样式。它也可以用于伪元素,属性值采用伪元素所依附的元素。attr() 表达式可以用于任何CSS属性。

用法:

attr( attr_name )

参数:该函数接受单个参数attr_name,该参数用于保存HTML元素中的属性名称。它是必填参数。

返回值:此函数返回选定元素的属性值。

一旦你知道了这个技巧,你就会吃惊于很多时候它能给你的工作带来的方便!
提示:在新版的CSS3标准中,attr()功能被扩展,可以用在各种CSS标记中。


attr()生成文本内容

元素可以有自定义的属性值,它的命名格式通常为data-*attr(),用于获取元素的这种自定义属性值,并赋值给其伪元素的content作为其生成的内容利用这个函数,我们可以用伪元素在原先文本的基础上“复制”出另一个文本。

实现文字移动效果

比如将鼠标移上去,文字进行移动效果,如下所示:

f l y 6 3

实现代码

<p class="arrt" data-text="fly63前端开发网">fly63前端开发网</p>
<p class="arrt" data-text="javascript">javascript</p>

<style>
ul,li{
list-style-type: none;
}
.arrt{
display: flex;
padding: 6px;
color: #47cf73;
font-size: 18px;
text-decoration: none;
overflow: hidden;
}
.arrt:hover span{
transform: translateY(-130%);
cursor: pointer;
}
.arrt span{
position: relative;
transition: 0.3s;
}
.arrt span::before{
position: absolute;
content: attr(data-text);
transform: translateY(130%);
}
</style>
<script>
let floatText = document.querySelectorAll(".arrt");
floatText.forEach(link => {
let letters = link.textContent.split("");
link.textContent = "";
letters.forEach((letter, i) => {
let span = document.createElement("span");
span.textContent = letter;
span.style.transitionDelay = `${i / 20}s`;
span.dataset.text = letter;
link.append(span);
});
});
</script>


链接: https://www.fly63.com/article/detial/11468

JavaScript 函数式编程

我理解的 JavaScript 函数式编程,都认为属于函数式编程的范畴,只要他们是以函数作为主要载体的。

Js函数式编程,给你的代码增加一点点函数式编程的特性

给你的代码增加一点点函数式编程的特性,最近我对函数式编程非常感兴趣。这个概念让我着迷:应用数学来增强抽象性和强制纯粹性,以避免副作用,并实现代码的良好可复用性。同时,函数式编程非常复杂。

让我们来创建一个JavaScript Wait函数

Async/await以及它底层promises的应用正在猛烈地冲击着JS的世界。在大多数客户端和JS服务端平台的支持下,回调编程已经成为过去的事情。当然,基于回调的编程很丑陋的。

JavaScript函数创建的细节

如果你曾经了解或编写过JavaScript,你可能已经注意到定义函数的方法有两种。即便是对编程语言有更多经验的人也很难理解这些差异。在这篇博客的第一部分,我们将深入探讨函数声明和函数表达式之间的差异。

编写小而美函数的艺术

随着软件应用的复杂度不断上升,为了确保应用稳定且易拓展,代码质量就变的越来越重要。不幸的是,包括我在内的几乎每个开发者在职业生涯中都会面对质量很差的代码。这些代码通常有以下特征:

javascript回调函数的理解和使用方法(callback)

在js开发中,程序代码是从上而下一条线执行的,但有时候我们需要等待一个操作结束后,再进行下一步操作,这个时候就需要用到回调函数。 在js中,函数也是对象,确切地说:函数是用Function()构造函数创建的Function对象。

js调用函数的几种方法_ES5/ES6的函数调用方式

这篇文章主要介绍ES5中函数的4种调用,在ES5中函数内容的this指向和调用方法有关。以及ES6中函数的调用,使用箭头函数,其中箭头函数的this是和定义时有关和调用无关。

JavaScript中函数的三种定义方法

函数的三种定义方法分别是:函数定义语句、函数直接量表达式和Function()构造函数的方法,下面依次介绍这几种方法具体怎么实现,在实际编程中,Function()构造函数很少用到,前两中定义方法使用比较普遍。

js在excel的编写_excel支持使用JavaScript自定义函数编写

微软 称excel就实现面向开发者的功能,也就是说我们不仅可以全新定义的公式,还可以重新定义excel的内置函数,现在Excel自定义函数增加了使用 JavaScript 编写的支持,下面就简单介绍下如何使用js来编写excel自定义函数。

js中的立即执行函数的写法,立即执行函数作用是什么?

这篇文章主要讲解:js立即执行函数是什么?js使用立即执行函数有什么作用呢?js立即执行函数的写法有哪些?

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!