做网站找什么公司好,网页设计范例,wordpress 备份数据库结构,如何制作一个单页网站要实现对多个a标签#xff08;比如链接#xff09;的模拟地球仪特效和鼠标跟随特效#xff0c;你可以使用CSS和一点点JavaScript来完成。下面是一个基本的示例代码#xff1a;HTML代码#xff1a;
!DOCTYPE html
html langen
h…要实现对多个a标签比如链接的模拟地球仪特效和鼠标跟随特效你可以使用CSS和一点点JavaScript来完成。下面是一个基本的示例代码HTML代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleEarth Effect/titlelink relstylesheet hrefstyles.css
/head
bodydiv classearth-containerdiv classearth/diva href# classlink onmousemovemoveFollower(event)企业融资/aa href# classlink onmousemovemoveFollower(event)产品发布/a!-- 添加更多的a标签 --div classmouse-follower/div/divscriptfunction moveFollower(event) {var follower document.querySelector(.mouse-follower);follower.style.left event.clientX px;follower.style.top event.clientY px;}/script
/body
/htmlCSS代码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来实现地球特效和链接的样式。
