当前位置: 首页 > news >正文

文字悬停效果

文字悬停效果

效果展示

在这里插入图片描述

CSS 知识点

  • CSS 变量使用回顾
  • -webkit-text-stroke 属性的运用与回顾

页面整体结构实现

<ul><li style="--clr: #e6444f"><a href="#" class="text">First</a></li><li style="--clr: #f0b024"><a href="#" class="text">Attempt</a></li><li style="--clr: #00a492"><a href="#" class="text">In</a></li><li style="--clr: #af579b"><a href="#" class="text">Learning</a></li>
</ul>

实现页面文字整体布局效果

body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #222;overflow: hidden;
}ul {position: relative;display: flex;flex-direction: column;gap: 20px;
}
ul li {list-style: none;
}
ul li .text {font-size: 4em;text-transform: uppercase;cursor: pointer;text-decoration: none;font-weight: 800;line-height: 1em;display: flex;align-items: center;
}

使用 JavaScript 拆分文字

为了方便实现我们需要的效果,需要把每个单词进行拆分,并且为每个字母添加同的样式和动画效果。具体的拆分代码如下:

const texts = document.querySelectorAll(".text");
texts.forEach((text) => {// 获取A标签中的单词,使用trim()函数进行字符串的切割,然后添加到A标签中const spans = Array.from(text.textContent.trim()).map((char) => `<span>${char === "" ? "&nbsp;" : char}</span>`).join("");text.innerHTML = spans;const spanList = text.querySelectorAll("span");spanList.forEach((span, index) => {span.addEventListener("mouseover", () => {spanList.forEach((s, i) => {const distance = Math.abs(index - i);const delay = (distance * 0.1).toFixed(1);s.style.transitionDelay = `${delay}s`;});});});
});

为每个单词添加基础样式

ul li .text span:not(:first-child) {letter-spacing: 0.1em;
}
ul li .text span {position: relative;-webkit-text-stroke: 1px #fff;color: transparent;transition: 1s;transform: rotateX(0deg);
}
ul li .text span:nth-child(1) {width: 70px;height: 70px;background: var(--clr);color: #222;-webkit-text-stroke: 0px #fff;display: flex;justify-content: center;align-items: center;margin-right: 5px;
}

为每个单词添加悬停样式

ul li .text:hover span:not(:first-child) {color: var(--clr);transition: 1s;transform: rotateX(360deg);-webkit-text-stroke: 1px transparent;
}

完整代码下载

完整代码下载

相关文章:

  • PCIE的吞吐量如何计算和记忆诀窍?
  • Calibre版图验证工具调用_笔记
  • 下载kibana-7.10.2教程
  • 恭喜!X医生斩获英国伦敦大学学院访问学者邀请函
  • Java工程师入职指南:从准备到适应新工作的每一步
  • [Python学习篇] Python运算符
  • GStreamer编译安装——使用Meson从源代码编译
  • 服务器无法远程桌面连接,解决服务器进行无法远程桌面连接方法有哪些
  • 在typora中利用正则表达式,批量处理图片
  • 【MySQL】MySQL45讲-读书笔记
  • 通过Stream流对集合进行操作
  • PHP聚合通多平台支付平台源码
  • 关于stm32的软件复位
  • spark MLlib (DataFrame-based) 中的聚类算法Bisecting K-Means、K-Means、Gaussian Mixture
  • 美丽的拉萨,神奇的布达拉宫
  • Angular 响应式表单之下拉框
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • echarts的各种常用效果展示
  • Git初体验
  • iOS 颜色设置看我就够了
  • Java 内存分配及垃圾回收机制初探
  • JavaScript 无符号位移运算符 三个大于号 的使用方法
  • java第三方包学习之lombok
  • Java基本数据类型之Number
  • Mysql优化
  • storm drpc实例
  • 不发不行!Netty集成文字图片聊天室外加TCP/IP软硬件通信
  • 大数据与云计算学习:数据分析(二)
  • 分享自己折腾多时的一套 vue 组件 --we-vue
  • 构建二叉树进行数值数组的去重及优化
  • 回顾2016
  • 聊聊redis的数据结构的应用
  • 买一台 iPhone X,还是创建一家未来的独角兽?
  • 使用 5W1H 写出高可读的 Git Commit Message
  • 微信小程序:实现悬浮返回和分享按钮
  • 用Node EJS写一个爬虫脚本每天定时给心爱的她发一封暖心邮件
  • 如何在招聘中考核.NET架构师
  • # 日期待t_最值得等的SUV奥迪Q9:空间比MPV还大,或搭4.0T,香
  • #1014 : Trie树
  • #window11设置系统变量#
  • $LayoutParams cannot be cast to android.widget.RelativeLayout$LayoutParams
  • (7)STL算法之交换赋值
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (C#)一个最简单的链表类
  • (Mirage系列之二)VMware Horizon Mirage的经典用户用例及真实案例分析
  • (超简单)使用vuepress搭建自己的博客并部署到github pages上
  • (附源码)ssm高校志愿者服务系统 毕业设计 011648
  • (蓝桥杯每日一题)love
  • (论文阅读11/100)Fast R-CNN
  • (论文阅读26/100)Weakly-supervised learning with convolutional neural networks
  • (十) 初识 Docker file
  • (四)搭建容器云管理平台笔记—安装ETCD(不使用证书)
  • (学习日记)2024.04.10:UCOSIII第三十八节:事件实验
  • (转)编辑寄语:因为爱心,所以美丽
  • **登录+JWT+异常处理+拦截器+ThreadLocal-开发思想与代码实现**