本帖最后由 风中飞尘 于 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。
万能的黑黑{:4_178:}
风中飞尘 发表于 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 12:34
将transition: 1s; 改为： transition: 3s;图片移动平滑多了！谢谢老师指点！
对，通过不断尝试，找到感觉
红影 发表于 2023-4-3 09:32
html 的a标签自动带下划线呢。
可以单独设置，要什么样式都可以定制
樵歌 发表于 2023-4-3 12:31
我居然把把第二个弄动了
腻害{:4_190:}
马黑黑 发表于 2023-4-3 13:29
可以单独设置，要什么样式都可以定制
嗯嗯，是的。
红影 发表于 2023-4-3 16:50
嗯嗯，是的。
这是锚
马黑黑 发表于 2023-4-3 13:30
腻害
哪里哪里{:4_334:}
樵歌 发表于 2023-4-3 19:07
哪里哪里
这里这里{:4_170:}
马黑黑 发表于 2023-4-3 17:06
这是锚
对这个锚不熟悉，记得你介绍过。
红影 发表于 2023-4-3 21:11
对这个锚不熟悉，记得你介绍过。
链接就是锚。锚的作用就是做链接标记。想一想刻舟求剑。
马黑黑 发表于 2023-4-3 21:27
链接就是锚。锚的作用就是做链接标记。想一想刻舟求剑。
恩，明白了，就是做个标记，以便能找到它。
红影 发表于 2023-4-4 20:17
恩，明白了，就是做个标记，以便能找到它。
大概如此，但又不是如此
马黑黑 发表于 2023-4-4 20:45
大概如此，但又不是如此
反正我也弄不太明白{:4_173:}
红影 发表于 2023-4-4 22:31
反正我也弄不太明白
链接这个锚，一方面它做有记号，所谓的标记，另一方面，它自身的作用是为他人服务，而不是标记它自身。
马黑黑 发表于 2023-4-4 23:44
链接这个锚，一方面它做有记号，所谓的标记，另一方面，它自身的作用是为他人服务，而不是标记它自身。
嗯嗯，不仅仅只是标记的作用。
红影 发表于 2023-4-5 10:07
嗯嗯，不仅仅只是标记的作用。
反正就是链接
马黑黑 发表于 2023-4-5 10:10
反正就是链接
我努力地理解理解再理解。
红影 发表于 2023-4-5 11:22
我努力地理解理解再理解。
链接其实是玩论坛的人都会知道的