学习
实践
活动
工具
TVP
写文章
专栏首页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

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:AlbertYang
原始发表时间:2020-12-16
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

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

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

    达达前端
  • CSS实现图片悬停文字叠加效果

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

    @零一
  • CSS实现图片悬停文字叠加效果

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

    @零一
  • 实现Bootstrap导航鼠标悬停下拉菜单及下拉主菜单可点击效果

    Bootstrap是一个非常不错的前端框架,但是在实际的使用过程中还需要根据实际的需要再微调整,比如我们默认使用Bootstrap框架下拉菜单的时候主导航是无法...

    老蒋
  • 在Mockplus中,如何做鼠标悬停时菜单下拉的效果?

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

    奔跑的小鹿
  • C# 鼠标悬停在datagridview的某单元格,显示悬浮框效果

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

    跟着阿笨一起玩NET
  • CSS3实现的动画效果下拉导航菜单效果

    CSS3实现的动画效果下拉导航菜单效果: 本章节分享一段代码示例,它实现了简单的下拉菜单效果。 但是下拉菜单具有3D旋转效果,代码实例如下:

    用户7108768
  • CSS3实现的动画效果下拉导航菜单效果

    CSS3实现的动画效果下拉导航菜单效果: 本章节分享一段代码示例,它实现了简单的下拉菜单效果。 但是下拉菜单具有3D旋转效果,代码实例如下:

    艳艳代码杂货店
  • CSS3贝塞尔曲线实战:创建链接悬停动画效果

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

    张张
  • CSS3实现多种背景效果

    重复平铺的几何图案很美观,但看起来可能有一些呆板。其实自然界中的事物都不是以无限平铺的方式存在的。即使重复,也往往伴随着多样性和随机性。因此为了更自然一些,我们...

    laixiangran
  • CSS3实现“图片阴影”效果

    利用多投影重叠的原理,实现曲线阴影与翘边阴影的效果,花一个小时看完的课程,理解的似懂非懂。直接发一下老师写的成品吧。用到来取。css都补上了注释。

    AlexTao
  • CSS3实现毛玻璃效果

    最近在开发个人博客的时候,在网上学到了一种CSS特效---毛玻璃 感觉还是比较实用下面将这种特效分享给大家。 如下图,我的后台登录界面表单部分就是毛玻璃效果 有...

    切图仔
  • 用CSS3实现钟表效果

    背景:最近在学习CSS3,看到了一个小案例,通过自己的学习,动手实现了它,现在把它分享出来。

    全栈程序员站长
  • CSS3实现多种网格背景效果

    对于css来说很多人都会陌生,但是对于站长来说却很熟悉,毕竟搭建一个网站不可能不会用到css,今天整理了一下我自己比较喜欢的网格背景效果,我这个人有时候喜欢简约...

    李洋博客
  • CSS3实现loading效果转圈圈

    8个点实际对应于box-shadow的8个投影,图片大小标准32px*32px,考虑到点的八卦布局以及大小限制,因此,我们的容器本身只有3px*3px,于是,有...

    javascript.shop
  • CSS3实现多样的边框效果

    laixiangran
  • CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记……

    用户7718188
  • CSS3实现各种纹理背景效果

    py3study

扫码关注腾讯云开发者

领取腾讯云代金券