专栏首页AlbertYang的编程之路5分钟实现鼠标悬停效果,CSS3悬停效果

5分钟实现鼠标悬停效果,CSS3悬停效果

font awesome 图标使用方法参考网站:

https://fontawesome.dashgame.com/

HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>鼠标悬停效果:微信公众号AlbertYang</title>
    <link rel="stylesheet" type="text/css" href="cursor.css" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>
    <ul>
      <li><a href="#"><i class="fa fa-address-card"></i></a></li>
      <li><a href="#"><i class="fa fa-address-card"></i></a></li>
      <li><a href="#"><i class="fa fa-drivers-license-o"></i></a></li>
      <li><a href="#"><i class="fa fa-envelope-open-o"></i></a></li>
      <li><a href="#"><i class="fa fa-ravelry"></i></a></li>
      <li><a href="#"><i class="fa fa-snowflake-o"></i></a></li>
      <div class="cursor"></div>
    </ul>
    <script>
      const cursor = document.querySelector(".cursor");
      document.addEventListener('mousemove', (e) => {
        cursor.style.left = e.pageX + 'px';
        cursor.style.top = e.pageY + 'px';
      })
</script>
  </body>
</html>

cursor.css:

* {
  margin: 0;
  padding: 0;
}
 
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: azure;
}
 
ul {
  position: relative;
  display: flex;
}
 
ul li {
  list-style: none;
  margin: 0 30px;
}
 
ul li a {
  position: relative;
  display: inline-block;
  font-size: 2em;
  color: gray;
  transition: all 0.3s;
}
 
ul li:hover a {
  color: deepskyblue;
  transform: scale(1.5);
}
 
.cursor {
  position: fixed;
  width: 0;
  height: 0;
  border: 15px solid gray;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: width 0.3s, height 0.3s;
}
 
ul li:hover~.cursor {
  width: 80px;
  height: 80px;
  border: 3px solid deepskyblue;
}

今天的学习就到这里了,由于本人能力和知识有限,如果有写的不对的地方,还请各位大佬批评指正。如果想继续学习提高,欢迎关注我,每天学习进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,评论,点赞!!!

本文分享自微信公众号 - AlbertYang(AlbertYang666),作者:AlbertYang

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-12-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 3d分层悬停效果

    经过了2个星期的努力,我回来了!会继续将我学习路上遇到的问题,以及一些笔记,demo分享给大家

    小丞同学
  • Web前端鼠标悬停实现显示与隐藏效果

    css定义,偏移量,相对定位,绝对定位 显示与隐藏 二维码相对于微信图标定位 鼠标悬停微信图标上显示 鼠标离开微信图标时隐藏 什么是定位,就是定义网页...

    达达前端
  • C# 鼠标悬停在datagridview的某单元格,显示悬浮框效果

    本文转载:http://www.cnblogs.com/bribe/archive/2013/10/08/3357345.html

    跟着阿笨一起玩NET
  • 界面按钮样式丑?不可能!16款css实现炫酷按钮

    整理了16款css按钮,经过全部测试,没发现有影响使用的bug,其中也可能存在部分bug,但是应该问题不大。

    青年码农
  • CSS中鼠标滑过图片放大效果

    刚刚看了下感觉还不错,纯CSS实现,虽然在开发主题时CSS3用的比较少。这是一款简单实用的CSS3鼠标滑过图片放大特效,我们可以将它应用在相册中,或者是轮播展示...

    开心分享
  • CSS实现图片悬停文字叠加效果

    在这篇文章中,我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程,你必须具备充分的 HTML 和 CSS 基本知识。

    @零一
  • 历时4个多月,学习了这 66 个CSS 特效

    这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧...

    前端小智@大迁世界
  • 在Mockplus中,如何做鼠标悬停时菜单下拉的效果?

    了解Mockplus的用户会知道,该原型工具目前并不直接支持鼠标悬停功能。但我经过尝试,发现想用它实现一个鼠标悬停事件并不是什么难事,比如网页设计中很常见的鼠...

    奔跑的小鹿
  • 【前端艺术】CSS3图片鼠标悬停动画特效代码

    该代码实现CSS3图片鼠标悬停动画特效。鼠标/手指悬停到图片上面的时候,利用CSS3制作上下关门的动画效果,非常炫酷。

    用户5997198
  • CSS3贝塞尔曲线实战:创建链接悬停动画效果

    我们将使用 CSS3 动画过渡来创建简单但引人入胜的链接悬停效果,将鼠标悬停在链接上时,会弹出一个小弹出框。

    张张
  • css3新属性position: sticky 一分钟实现 导航栏悬停功能

    想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn:

    @零一
  • 前端特效制作 | CSS3圆形风格面包屑导航

    HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

    HTML5学堂
  • Android 滑动定位和吸附悬停效果实现代码

    在前两篇文章中,分别介绍了tablayout+scrollview 和 tablayout+recyclerview 实现的滑动定位的功能,文章链接:

    砸漏
  • 超链接的lvha原则

    这5个都是伪类,表示5种状态,其中link与visited是超链接专用的,可以分类到链接伪类,而focus,hover和active除了用于超链接还适用于其它元...

    ayqy贾杰
  • 【案例】CSS3鼠标经过文字分裂特效

    今天段老师给同学们带来的是一款基于CSS3鼠标经过文字分裂特效是一款css3基于clip剪裁属性制作悬停文字斜线切割两断效果。

    用户1730674
  • css实现动态效果

    在线显示地址:https://gethtml.cn/project/2020/03/17/index.html

    Dreamy.TZK
  • 30个最优CSS动画案例分享,轻松让网页用户随心而“动”

    CSS或CSS3动画,包括常见的鼠标悬停动画,网页加载动画,页面切换动画,文本动画以及背景动画等等,能够有效地提升网页趣味性和视觉吸引力。这也是为什么CSS/C...

    奔跑的小鹿
  • CSS选择器分类

    上一节练习题:写两个各10条数据的列表,第一个列表字体是16px,第二个列字体大小是20px。实现方法很多,但是根据现有知识写出来代码会很多,所以今天我们通过学...

    呆呆
  • 一篇文章带你了解CSS3按钮知识

    在实际开发中,按钮的应用是必不可少。使用 CSS 来制作按钮,可以更有新意,更有趣,也可以自定义自己想要的样式。

    前端皮皮

扫码关注云+社区

领取腾讯云代金券