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

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

相关推荐

  1. css特效:tag标签实现模拟地球仪特效

    2024-06-11 18:48:03       3 阅读
  2. CSS标题应内容的tab切换

    2024-06-11 18:48:03       7 阅读

最近更新

  1. Aeron:Online Resources

    2024-06-11 18:48:03       0 阅读
  2. 安卓gradel下载失败解决方案

    2024-06-11 18:48:03       0 阅读
  3. 实战

    实战

    2024-06-11 18:48:03      0 阅读
  4. 力扣719.找出第K小的数对距离

    2024-06-11 18:48:03       0 阅读
  5. 10月,2024北京养老展,北京老年生活用品展览会

    2024-06-11 18:48:03       0 阅读
  6. python之面向对象编程

    2024-06-11 18:48:03       0 阅读

热门阅读

  1. 2024-6-11-SPECT和PET的区别是什么

    2024-06-11 18:48:03       4 阅读
  2. docker-ce 和 docker-ee介绍版本介绍

    2024-06-11 18:48:03       2 阅读
  3. C++中的命令模式

    2024-06-11 18:48:03       1 阅读
  4. 结构化表达,了解python的pep

    2024-06-11 18:48:03       2 阅读
  5. 关系模式R(U,F)【数据库-软件设计师】

    2024-06-11 18:48:03       5 阅读
  6. 常用的三种软件架构

    2024-06-11 18:48:03       2 阅读
  7. GMT shp转gmt数据

    2024-06-11 18:48:03       2 阅读
  8. 数据库文件的简单设计

    2024-06-11 18:48:03       3 阅读
  9. 关于AD9781芯片的说明以及FPGA控制实现 I

    2024-06-11 18:48:03       4 阅读
  10. Web前端后端精通:深度解析与技能进阶

    2024-06-11 18:48:03       2 阅读
  11. Ascend ATC相关参数说明和描述

    2024-06-11 18:48:03       5 阅读
  12. Android:UI:Drawable:View/ImageView与Drawable

    2024-06-11 18:48:03       3 阅读
  13. 【Linux】另一种基于rpm安装yum的方式

    2024-06-11 18:48:03       2 阅读