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

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

news 2026/2/2 11:23:22

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

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

python爬虫：Newspaper3k 的详细使用（好用的新闻网站文章抓取和解析的Python库）

更多内容请见： 爬虫和逆向教程-专栏介绍和目录 文章目录 一、Newspaper3k 概述1.1 Newspaper3k 介绍1.2 主要功能1.3 典型应用场景1.4 安装二、基本用法2.2 提取单篇文章的内容2.2 处理多篇文档三、高级选项3.1 自定义配置3.2 分析文章情感四、实战案例4.1 构建新闻摘要聚合器…...

编程新知 2025/10/25 7:51:48

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

编程新知 2026/1/27 18:13:23

技术栈RabbitMq的介绍和使用

目录 1. 什么是消息队列&#xff1f;2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...

编程新知 2026/1/23 10:10:53

纯 Java 项目（非 SpringBoot）集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目&#xff08;非 SpringBoot&#xff09;集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

编程新知 2025/9/26 12:26:35

【MATLAB代码】基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则（MCC）的三维鲁棒卡尔曼滤波算法（MCC-KF），针对传感器观测数据中存在的脉冲型异常噪声问题，通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现，验证了后者在状态估计鲁棒性方面的显著优…...

编程新知 2026/1/28 9:00:05

代码规范和架构【立芯理论一】（2025.06.08）

1、代码规范的目标 代码简洁精炼、美观&#xff0c;可持续性好高效率高复用&#xff0c;可移植性好高内聚&#xff0c;低耦合没有冗余规范性&#xff0c;代码有规可循&#xff0c;可以看出自己当时的思考过程特殊排版&#xff0c;特殊语法&#xff0c;特殊指令&#xff0c;必须…...

编程新知 2026/1/28 11:47:09

脑机新手指南（七）：OpenBCI_GUI：从环境搭建到数据可视化（上）

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

编程新知 2026/1/28 16:49:17