不知道是不是风中飞尘要的

风中飞尘 · 发表于 2023-4-3 13:00

本帖最后由风中飞尘于 2023-4-3 13:02 编辑

大概是这类似的，，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hover Animation</title>
<style>
.link {
position: relative;
display: inline-block;
padding: 10px;
color: #000;
text-decoration: none;
font-size: 24px;
font-weight: bold;
transition: all 0.3s ease;
}
.link:hover:before {
content: "";
position: absolute;
top: 50px;
left: 0;
width: 150px;
height: 36px;
background: url("https://pan.111t.net/updir/zp/20230401124807.png") no-repeat;
background-size: cover;
animation: flyIn 0.5s forwards;
z-index: -1;
}
@keyframes flyIn {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
</style>
<script>
var audio = new Audio(); // 创建一个 Audio 对象
audio.src = "https://pan.111t.net/updir/zp/20230401131834.mp3"; // 设置音频文件路径
function playSound() {
audio.play(); // 播放音频
}
</script>
</head>
<body>
<a href="#" class="link" onmouseover="playSound()" >这是一个链接!测试链接</a>
</body>
</html>
```
你需要将`your-image-url-here`替换为你想要使用的图片的URL。

复制代码

小辣椒 · 发表于 2023-4-3 13:09

万能的黑黑

马黑黑 · 发表于 2023-4-3 13:27

风中飞尘发表于 2023-4-3 12:48
能不能，，鼠标触碰到链接，图片才显示出来，在从左到右划过图片自动消失，，，而不是直接显示图片

那也好弄的：先把图片定好位，将其 display 设置为 none，这些是在CSS里做。然后，通过JS的鼠标滑过事件，将图片的 display 设置为 block，接着改变它的位置。

图片的父元素设置 overflow 为 hidden，这样，当图片的 left 值超过父元素的右边界，图片就不可见了。

图片的 transition 值是关键，是图片慢慢滑动出去的依据，所以图片的 transition 可以这样设置（假设我们通过改变图片的left值来移动图片）：

transition: left 2s;

这样，图片的 display 属性不受 transition 限制，鼠标滑过链接锚时可以立即显示。

这只是思路，你迟早需要自己构建代码，所以我不想把具体代码都写出来。

马黑黑 · 发表于 2023-4-3 13:29

亦是金发表于 2023-4-3 12:34
将transition: 1s; 改为： transition: 3s; 图片移动平滑多了！谢谢老师指点！

对，通过不断尝试，找到感觉

马黑黑 · 发表于 2023-4-3 13:29

红影发表于 2023-4-3 09:32
html 的a标签自动带下划线呢。

可以单独设置，要什么样式都可以定制

马黑黑 · 发表于 2023-4-3 13:30

樵歌发表于 2023-4-3 12:31
我居然把把第二个弄动了

腻害

红影 · 发表于 2023-4-3 16:50

马黑黑发表于 2023-4-3 13:29
可以单独设置，要什么样式都可以定制

嗯嗯，是的。

马黑黑 · 发表于 2023-4-3 17:06

红影发表于 2023-4-3 16:50
嗯嗯，是的。

这是锚

樵歌 · 发表于 2023-4-3 19:07

马黑黑发表于 2023-4-3 13:30
腻害

哪里哪里

马黑黑 · 发表于 2023-4-3 19:08

樵歌发表于 2023-4-3 19:07
哪里哪里

这里这里

红影 · 发表于 2023-4-3 21:11

马黑黑发表于 2023-4-3 17:06
这是锚

对这个锚不熟悉，记得你介绍过。

马黑黑 · 发表于 2023-4-3 21:27

红影发表于 2023-4-3 21:11
对这个锚不熟悉，记得你介绍过。

链接就是锚。锚的作用就是做链接标记。想一想刻舟求剑。

红影 · 发表于 2023-4-4 20:17

马黑黑发表于 2023-4-3 21:27
链接就是锚。锚的作用就是做链接标记。想一想刻舟求剑。

恩，明白了，就是做个标记，以便能找到它。

马黑黑 · 发表于 2023-4-4 20:45

红影发表于 2023-4-4 20:17
恩，明白了，就是做个标记，以便能找到它。

大概如此，但又不是如此

红影 · 发表于 2023-4-4 22:31

马黑黑发表于 2023-4-4 20:45
大概如此，但又不是如此

反正我也弄不太明白

马黑黑 · 发表于 2023-4-4 23:44

红影发表于 2023-4-4 22:31
反正我也弄不太明白

链接这个锚，一方面它做有记号，所谓的标记，另一方面，它自身的作用是为他人服务，而不是标记它自身。

红影 · 发表于 2023-4-5 10:07

马黑黑发表于 2023-4-4 23:44
链接这个锚，一方面它做有记号，所谓的标记，另一方面，它自身的作用是为他人服务，而不是标记它自身。

嗯嗯，不仅仅只是标记的作用。

马黑黑 · 发表于 2023-4-5 10:10

红影发表于 2023-4-5 10:07
嗯嗯，不仅仅只是标记的作用。

反正就是链接

红影 · 发表于 2023-4-5 11:22

马黑黑发表于 2023-4-5 10:10
反正就是链接

我努力地理解理解再理解。

马黑黑 · 发表于 2023-4-5 11:24

红影发表于 2023-4-5 11:22
我努力地理解理解再理解。

链接其实是玩论坛的人都会知道的

不知道是不是风中飞尘要的

浏览过的版块

花潮帅哥

鼠

牛

虎

兔

龙

蛇

马

羊

猴

鸡

狗

猪

音画大师

天籁妙音

幸福快乐

前途似锦

花潮贵宾

花潮美女

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

缤纷心情

草莓情怀

青草情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

男儿情怀

鹰傲苍穹

心香一瓣

风雨同行

我心永远

喜乐安康

中秋征文

指尖上的流年

花潮管理

相遇之美

花好月圆

紫色情节

飞龙在天

王者至尊

大将风范

共看流星

侠骨柔肠

心想事成

开朗大方

一往情深

金剪刀

妙笔生花

天长地久

绚丽缤纷

周年庆

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

春意盎然