文字悬停效果

2024-06-13 00:52
文章标签 文字 效果 悬停

本文主要是介绍文字悬停效果,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文字悬停效果

效果展示

在这里插入图片描述

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;
}

完整代码下载

完整代码下载

这篇关于文字悬停效果的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1055830

相关文章

高效录音转文字:2024年四大工具精选!

在快节奏的工作生活中,能够快速将录音转换成文字是一项非常实用的能力。特别是在需要记录会议纪要、讲座内容或者是采访素材的时候,一款优秀的在线录音转文字工具能派上大用场。以下推荐几个好用的录音转文字工具! 365在线转文字 直达链接:https://www.pdf365.cn/ 365在线转文字是一款提供在线录音转文字服务的工具,它以其高效、便捷的特点受到用户的青睐。用户无需下载安装任何软件,只

防近视护眼台灯什么牌子好?五款防近视效果好的护眼台灯推荐

在家里,灯具是属于离不开的家具,每个大大小小的地方都需要的照亮,所以一盏好灯是必不可少的,每个发挥着作用。而护眼台灯就起了一个保护眼睛,预防近视的作用。可以保护我们在学习,阅读的时候提供一个合适的光线环境,保护我们的眼睛。防近视护眼台灯什么牌子好?那我们怎么选择一个优秀的护眼台灯也是很重要,才能起到最大的护眼效果。下面五款防近视效果好的护眼台灯推荐: 一:六个推荐防近视效果好的护眼台灯的

【Godot4.3】多边形的斜线填充效果基础实现

概述 图案(Pattern)填充是一个非常常见的效果。其中又以斜线填充最为简单。本篇就探讨在Godot4.3中如何使用Geometry2D和CanvasItem的绘图函数实现斜线填充效果。 基础思路 Geometry2D类提供了多边形和多边形以及多边形与折线的布尔运算。按照自然的思路,多边形的斜线填充应该属于“多边形与折线的布尔运算”范畴。 第一个问题是如何获得斜线,这条斜线应该满足什么样

UniApp实现漂亮的音乐歌词滚动播放效果

在现代的音乐播放应用中,歌词的展示和滚动播放已经成为了一个非常常见的功能。今天,我们将通过UniApp来实现一个漂亮的歌词滚动播放功能。我们将使用UniApp提供的组件和API来完成这个任务。 页面结构 在页面的模板部分,我们需要创建一个音频播放器和歌词展示区域。使用<scroll-view>组件来实现歌词的滚动效果。 <template><view class="audio-co

Winfrom中解决图像、文字模糊的方法

1.添加清单 2.将清单中的下面内容取消注释

Nuxt3入门:过渡效果(第5节)

你好同学,我是沐爸,欢迎点赞、收藏、评论和关注。 Nuxt 利用 Vue 的 <Transition> 组件在页面和布局之间应用过渡效果。 一、页面过渡效果 你可以启用页面过渡效果,以便对所有页面应用自动过渡效果。 nuxt.config.js export default defineNuxtConfig({app: {pageTransition: {name: 'fade',mode

【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】

生日视频制作教程酒吧一群美女车展模特大屏幕视频改字AE模板修改文字特效广软件告生成神器素材祝福玩法AE模板工程 怎么如何做的【生日视频制作】酒吧一群美女车展模特大屏幕视频改字AE模板修改文字软件生成器教程特效素材【AE模板】 生日视频制作步骤: 安装AE软件 下载AE模板 把AE模板导入AE软件 修改图片或文字 渲染出视频

ORA-01861:文字与格式字符串不匹配

select t.*, t.rowid from log_jk_dtl t; insert into log_jk_dtl (rq,zy,kssj,jssj,memo)  values (to_date(sysdate,'yyyy-mm-dd'),'插入供应商', to_char(sysdate,'hh24:mi:ss'),to_char(sysdate,'hh24:mi:ss'),'备注'

Differential Diffusion,赋予每个像素它应有的力量,以及在comfyui中的测试效果

🥽原论文要点 首先是原论文地址:https://differential-diffusion.github.io/paper.pdf 其次是git介绍地址:GitHub - exx8/differential-diffusion 感兴趣的朋友们可以自行阅读。 首先,论文开篇就给了一个例子: 我们的方法根据给定的图片和文本提示,以不同的程度改变图像的不同区域。这种可控性允许我们再现