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

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

news 2025/7/3 17:38:11

要实现对多个<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）： 

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来实现地球特效和链接的样式。

相关文章：

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

要实现对多个<a>标签&#xff08;比如链接&#xff09;的模拟地球仪特效和鼠标跟随特效&#xff0c;你可以使用CSS和一点点JavaScript来完成。下面是一个基本的示例代码&#xff1a;HTML代码&#xff1a; <!DOCTYPE html> <html lang"en"> <h…...

编程日记 2024/6/11 20:07:56

【2024Python教程】Python文件打包成exe，如果有图片怎么打包？有手就会的超简单教程

目录 pyinstaller模块打包exe&#xff08;无图片或其他文件打包版&#xff09; 第一步 安装pyinstaller模块&#xff1a; 第二步 找到需要打包的主程序文件夹 第三步 打包exe文件 第四步 确认exe文件是否可以打开 pyinstaller模块打包exe&#xff08;有图片打包版--方法一…...

编程日记 2024/6/11 20:06:54

mac环境基于llama3和metaGPT自动开发2048游戏

1.准备虚拟环境 conda create -n metagpt python3.9 && conda activate metagpt 2.安装metagpt pip install --upgrade metagpt 3.初始化配置文件 metagpt --init-config 4. 安装llama3 5. 修改配置文件 6.让metegpt自动开发2048游戏 7.经过多轮迭代&#xff0c;最终…...

编程日记 2024/6/11 20:04:53

这些Linux知识可不是靠背就会的！

在信息技术日新月异的今天&#xff0c;Linux以其开源、稳定、高效的特性&#xff0c;逐渐成为了众多专业人士的首选操作系统。然而&#xff0c;关于Linux知识的学习&#xff0c;却常常陷入一个误区——许多人认为&#xff0c;掌握Linux就是死记硬背各种命令和参数。这种观念&am…...

编程日记 2024/6/11 20:03:52

openlayers 绘图功能，绘制多边形，draw组件的使用，一个简单的需求引发的思考（一）

1 需求 使用openlayers绘图功能绘制多边形 2 分析 主要是openlayers中draw功能的使用&#xff0c;感觉比较简单&#xff0c;祖传CV大法搞起来 3 实现 为了方便&#xff0c;就不加载底图了&#xff0c;直接使用绘制功能 2.1 简单实现 <template><div id"ma…...

编程日记 2024/6/11 19:58:46

【Flutter】 TextField限制长度时， 第三方手写输入法、ios原始拼音输入法输入被吞问题

问题描述 TextField限制长度时&#xff0c; 当你的输入字符长度已经到了最大值-1时&#xff0c;使用第三方手写输入法或者ios原生拼音输入法输入liang&#xff08;什么拼音都行&#xff0c;这里只是举例&#xff09;&#xff0c;输到i那么li都会消失。 原因分析 这是因为第三…...

编程日记 2024/6/11 19:55:44

快递一键查询，只需快递单号，轻松掌握全程物流信息，让您的包裹追踪无忧！

在快节奏的现代生活中&#xff0c;快递已经成为我们生活中不可或缺的一部分。无论是网购的宝贝、亲朋好友寄来的礼物&#xff0c;还是工作中的紧急文件&#xff0c;快递都承载着我们的期待和需要。然而&#xff0c;面对众多的快递公司和复杂的查询流程&#xff0c;如何快速、准…...

编程日记 2024/6/11 19:50:39

【Java探索之旅】继承结构 继承和组合 protected final

文章目录 &#x1f4d1;前言一、继承1.1 继承关系的代码块1.2 protected关键字1.3 继承方式1.4 final关键字1.5 继承与组合 &#x1f324;️全篇总结 &#x1f4d1;前言 在面向对象编程中&#xff0c;继承是一种重要的概念&#xff0c;它允许我们创建一个新类&#xff0c;从现有…...

编程日记 2024/6/11 19:48:37

Ubuntu20.04-SLAM软件安装

目录 安装环境安装问题1.Ubuntu20.04在T440p上的安装问题1.1 安装后提示"x86/cpu:VMX(outside TXT) disabled by BIOS"1.2 ACPI Error:Needed type[Reference],found [Integer] 等错误1.3 ima: Error Communicating to TPM chip1.4 locate命令的安装 2.中文输入法-go…...

编程日记 2024/6/11 19:46:34

OSI七层网络参考模型

一、物理层 我们要发送出去的数据在计算机里只不过是无数的0和1&#xff0c;0或1就叫做比特&#xff0c;物理层就是把这些比特用不同的媒介传输出去&#xff0c;可以用电、光或者其他形式的电磁波来表示和传输信号&#xff0c;数据从网络接口出去以后&#xff0c;会经过不同的网…...

编程日记 2024/6/11 19:45:33

RAG与知识库搭建

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务&#xff0c;并且需要GPU资源&#xff0c;可以考虑使用UCloud云计算旗下的Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&…...

编程日记 2024/6/11 19:44:32

MySQL提权之UDF提权

1、前言 最近遇到udf提权&#xff0c;几经周折终于搞懂了。感觉挺有意思的&#xff0c;渗透思路一下子就被打开了。 2、什么是udf提权 udf 全称为user defined function&#xff0c;意思是用户自定义函数。用户可以对数据库所使用的函数进行一个扩展&#xff08;windows利用…...

编程日记 2024/6/11 19:43:31

【设计模式】结构型设计模式之 组合模式

介绍 这里的组合模式&#xff0c;与之前的设计模式中的"组合关系"完全是两码事&#xff0c;这里的组合模式主要用来处理结构为树形的数据。 组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你将对象组合成树状结构来表示…...

编程日记 2024/6/11 19:40:28

我给KTV服务生讲解防抖，他竟然听懂了

端午节三天假期&#xff0c;的最后一天&#xff0c;我和朋友闲来无事&#xff0c;想着去唱会儿歌吧&#xff0c;好久不唱了&#xff0c;于是吃了午饭&#xff0c;石景山就近找了一家KTV&#xff0c;我们团好了卷就过去了。 装修还算不错&#xff0c;很快找到服务生&#xff0c…...

编程日记 2024/6/11 19:39:26

抽象java入门1.3.1

前言&#xff1a; 本期内容是为了更好补充关于方法&#xff08;函数&#xff09;的定义 开始&#xff1a; 函数&#xff08;function&#xff09;表示每个输入值对应唯一输出值的一种对应关系。 核心在于&#xff1a;输入值和输出值这两个元素 真的吗&#xff1f; 错&…...

编程日记 2024/6/11 19:38:26

使用Rufus工具制作Ubuntu To Go——很详细

一、准备工作 准备工具&#xff1a; 1、下载Rufus(主角)软件 2、准备一个U盘&#xff08;制作启动盘&#xff0c;32G足够&#xff09; 3、准备一个U盘或硬盘&#xff08;小白128G足够&#xff0c;装Ubuntu系统&#xff09; 4、下载Ubuntu系统镜像文件 1、下载软件Rufus 先来看…...

编程日记 2024/6/11 19:35:13

Android Jetpack Compose 实现一个电视剧选集界面

文章目录 需求概述效果展示实现思路代码实现总结 需求概述 我们经常能看到爱奇艺或者腾讯视频这类的视频APP在看电视剧的时候都会有一个选集的功能。如下图所示 这个功能其实很简单&#xff0c;就是绘制一些方块&#xff0c;在上面绘制上数字&#xff0c;还有标签啥的。当用户…...

编程日记 2024/6/11 19:34:10

C++多线程并发

文章目录 C多线程并发std::chronoC中的多线程&#xff1a;std::thread主线程等待子线程结束&#xff1a;join主线程分离子线程&#xff1a;detach异步&#xff1a;std::async异步的另一种用法&#xff1a;std::launch::deferredstd::async的底层实现&#xff1a;std::promisest…...

编程日记 2024/6/11 19:32:08

新火种AI|摊上事儿了！13名OpenAI与谷歌员工联合发声：AI失控可能导致人类灭绝...

作者&#xff1a;小岩 编辑&#xff1a;彩云 2024年&#xff0c;OpenAI的CEO Sam Altman就没有清闲过&#xff0c;他似乎一直走在解决麻烦的路上。最近&#xff0c;他的麻烦又来了。 当地时间6月4日&#xff0c;13位来自OpenAI和Google Deep Mind的现任及前任员工联合发布了…...

编程日记 2024/6/11 19:31:06

Web前端后端精通：深度解析与技能进阶

Web前端后端精通&#xff1a;深度解析与技能进阶 在数字时代的浪潮中&#xff0c;Web前端后端技术的精通成为了信息科技领域的核心竞争力。本文将从四个方面、五个方面、六个方面和七个方面深入探讨Web前端后端技术的精髓&#xff0c;带领读者领略这一领域的魅力与挑战。 一、…...

编程日记 2024/6/11 19:28:03

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2025/7/1 5:43:01

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/6/25 0:51:27

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2025/6/24 3:19:42

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/6/20 15:09:15

A2A JS SDK 完整教程：快速入门指南

目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库&#xff…...

编程新知 2025/6/18 3:11:41

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/6/21 13:17:52

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...

编程新知 2025/6/21 16:18:00

C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）

名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

编程新知 2025/6/16 21:02:04

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

编程新知 2025/6/21 18:04:05

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2025/7/3 7:15:14