css表达式 attr() 用来获取选择到的元素的某一html属性值,并用于其样式。它也可以用于伪元素,属性值采用伪元素所依附的元素。attr() 表达式可以用于任何CSS属性。
用法:
attr( attr_name )
参数:该函数接受单个参数attr_name,该参数用于保存HTML元素中的属性名称。它是必填参数。
返回值:此函数返回选定元素的属性值。
一旦你知道了这个技巧,你就会吃惊于很多时候它能给你的工作带来的方便!
提示:在新版的CSS3标准中,attr()功能被扩展,可以用在各种CSS标记中。
比如将鼠标移上去,文字进行移动效果,如下所示:
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>
box-shadow:盒子阴影,可以给卡片添加提高美化效果。可广泛应用于内容展示页面。css3 过渡:最简单的过渡是一个div,给它加上如下代码,便可以从宽度100px华丽的过渡到宽度为300px。
常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。
我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果。
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢?通常这类效果第一反应可能就是借助canvas了
先来无事谢了一个抖音文字都懂效果(比较晃眼),效果非常简单,就是一个 CSS3 的动画效果。直接将这下面代码,放到你的 CSS 文件:
最近准备对团队里公共的插件做一些小动效,优化用户体验。这次的先从最简单的toast插件入手。主要的文件有如下两个:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!