css特效:对多个tag标签实现模拟地球仪特效

server/2024/10/22 7:15:21/

要实现对多个<a>标签(比如链接)的模拟地球仪特效和鼠标跟随特效,你可以使用CSS和一点点JavaScript来完成。下面是一个基本的示例代码:HTML代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Earth Effect</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="earth-container"><div class="earth"></div><a href="#" class="link" onmousemove="moveFollower(event)">企业融资</a><a href="#" class="link" onmousemove="moveFollower(event)">产品发布</a><!-- 添加更多的<a>标签 --><div class="mouse-follower"></div></div><script>function moveFollower(event) {var follower = document.querySelector('.mouse-follower');follower.style.left = event.clientX + 'px';follower.style.top = event.clientY + 'px';}</script>
</body>
</html>

CSS代码(styles.css):

css">body {margin: 0;overflow: hidden;
}.earth-container {position: relative;
}.earth {width: 200px;height: 200px;background: url('earth.jpg') no-repeat center center;background-size: cover;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);animation: spin 20s linear infinite;
}.link {position: absolute;color: white;text-decoration: none;font-size: 18px;transition: all 0.3s ease;
}.link:hover {color: yellow;
}.mouse-follower {width: 20px;height: 20px;background-color: red;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);pointer-events: none; /* 防止鼠标事件影响follower */
}@keyframes spin {100% {transform: translate(-50%, -50%) rotateY(360deg);}
}

在这个示例中,我们创建了多个<a>标签作为链接,并且给它们添加了onmousemove事件来调用moveFollower函数,这个函数会根据鼠标位置移动.mouse-follower元素,从而实现鼠标跟随特效。同时,我们使用了CSS来实现地球特效和链接的样式。


http://www.ppmy.cn/server/48264.html

相关文章

电商项目-day02

文章目录 分析项目结构登录请求项目搭建Result总结 分析项目结构 语法的限制打开 端口修改 修改port 前端的入口工程是main.js 登录请求 早期的登录是使用session 称为 会话 也称为域 使用jwt进行验证 模块 spzx-partent 父工程 使用pom 其他的模块都是 jar包 项目搭…

利用ffmpeg从视频中提取纯(音频、视频、字幕)再合成视频

1. 提取纯音频 ffmpeg -i rawVideo.mp4 -acodec copy -vn vnVideo.aac 或者 ffmpeg -i rawVideo.mp4 -c:a copy -vn vnVideo.aac-vn: v代表视频&#xff0c;n代表no,无视频的意思 -acodec copy: 音频只拷贝&#xff0c;不编解码 -acodec的缩写-c:a -codecd的缩写-c2. 提取纯视…

ChatGPT

ChatGPT是一款由OpenAI开发的人工智能助手&#xff0c;它能够通过自然语言处理技术与用户进行交互&#xff0c;提供各种服务和帮助。在这篇博客中&#xff0c;我们将探讨ChatGPT的工作原理、优势以及它在未来可能的应用领域。 首先&#xff0c;让我们来了解一下ChatGPT的工作原…

网络框架netpoll中的SO_ZEROCOPY

背景了解 https://www.163.com/dy/article/FS6AS7SS0518R7MO.html https://docs.kernel.org/networking/msg_zerocopy.html send() with MSG_ZEROCOPY kernel v4.14 版本接受了来自 Google 工程师 Willem de Bruijn 在 TCP 网络报文的通用发送接口 send() 中实现的 zero-cop…

2021 hnust 湖科大 操作系统课设 报告+原代码+指导书+流程图源文件

2021 hnust 湖科大 操作系统课设 报告原代码指导书流程图源文件 详情 目录 验证类实验&#xff1a; 1 实验一&#xff1a;Windows进程管理 1 一、 实验题目&#xff1a; 1 二、 实验目的 1 三、 实验内容 1 四、 实验结果与分析 2 五、 小结与心得体会 5 实验二&#xff1a;L…

综合型驱鸟装置:光伏电站集束冲击波驱鸟器

光伏电站作为绿色、清洁的能源生产方式&#xff0c;正在全球范围内得到快速发展。在光伏电站的建设和运营过程中&#xff0c;鸟类活动所带来的影响逐渐凸显&#xff0c;成为电站管理者需要面对的重要问题。在此背景下&#xff0c;光伏电站驱鸟器的需求也不断增长。 目前市场上的…

系统提示xlive.dll丢失有什么解决办法?详细解决办法介绍

如果你曾经在玩那些超酷的大型游戏时遇到过xlive.dll文件丢失的问题&#xff0c;那么你来对地方了&#xff01;这篇文章将带你一步步学习如何修复这个烦人的xlive.dll文件缺失问题。不仅如此&#xff0c;我们还会分享一些超级重要的注意事项&#xff0c;确保在修复过程中不会引…

Spring Boot 常用注解

1. 启动类注解 SpringBootApplication: 它是 Spring Boot 的核心注解&#xff0c;包含了 SpringBootConfiguration、EnableAutoConfiguration 和 ComponentScan 三个注解。SpringBootConfiguration&#xff1a;标注当前类为配置类&#xff0c;类似于 Spring 的 Configuration 注…