最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。

这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像我们想象的那么难!

追踪位置

我们要做的第一件事就是获取到鼠标的位置。

JS代码:

document.querySelector('.button').onmousemove = (e) => {

  const x = e.pageX - e.target.offsetLeft
  const y = e.pageY - e.target.offsetTop   e.target.style.setProperty('--x', `${ x }px`)
  e.target.style.setProperty('--y', `${ y }px`) }

1、选择元素,等待,直到用户将鼠标移过它;

2、计算相对于元素的位置;

3、将坐标存在CSS的变量中。

仅仅9行代码就让你能获知用户放置鼠标的位置,通过这个信息你能达到意想不到的效果,但是我们还是先来完成CSS部分的代码。

动画渐变

我们先将坐标存储在CSS变量中,以便能够随时使用它们。

.button {
  position: relative;
  appearance: none;
  background: #f72359;
  padding: 1em 2em;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border-radius: 100px;   span {
    position: relative;
  }   &::before {
    --size: 0;       content: '';
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(circle closest-side, #4405f7, transparent);
    transform: translate(-50%, -50%);
    transition: width .2s ease, height .2s ease;
  }   &:hover::before {
    --size: 400px;
  }
}

1、用 span 包裹文本,以避免显示在按钮的上方。

2、将 width 和 height 初始化为 0px ,当用户悬停在按钮上时,将其改为 400px 。不要忘了设置这种转换以使其像风一样瞬间出现;

3、利用坐标追踪鼠标位置;

4.在 background 属性上应用 radial-gradient ,使用 closest-side circle 。Closest-side 能够覆盖整个面。

结果

成功!将其加入到对应的HTML页面,你炫酷的按钮就可以使用啦!

利用CSS变量实现炫酷的悬浮效果的更多相关文章

  1. css3 之炫酷的loading效果

    css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...

  2. 一个炫酷的Actionbar效果

    今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...

  3. [css]演示:纯CSS实现的右侧底部简洁悬浮效果

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 巧妙的实现 CSS 斜线(炫酷的小效果)

      开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果 ...

  5. 如何利用GitHub设计一个炫酷的个人网站(含代码)

    1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...

  6. 利用GitHub制作在线炫酷简历

    首先我们先体验一下炫酷简历.然后决定我们要不要使用. https://jessezhao1990.github.... 如何使用本项目部署你自己的在线简历 1. 书写简历 在src文件夹里面有个con ...

  7. 纯CSS实现的右侧底部简洁悬浮效果

    我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...

  8. >炫酷的计时器效果Canvas绘图与动画<

    >炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...

  9. iOS动画开发之五——炫酷的粒子效果

    在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休 ...

随机推荐

  1. java中Runtime类详细介绍

    Runtime类描述了虚拟机一些信息.该类采用了单例设计模式,可以通过静态方法 getRuntime()获取Runtime类实例.下面演示了获取虚拟机的内存信息: package Main; publ ...

  2. python—异常处理

    一:什么是异常? (异常就是程序运行时发生错误的信号) 错误分两种: 1.语法错误 2.逻辑错误 二:异常的种类? (在python中不同的异常可以用不同的类型(python中统一了类与类型,类型即类 ...

  3. 通过SecureCRT向远程Linux主机上传和下载文件

    有时候直接在Linux服务器上通过 wget 或 curl 工具下截比较大的网络文件时会比较慢,这时我们通常会改用在Windows平台通过迅雷等更加现代化的下载功具下好目标文件(迅雷开会员才能更高速的 ...

  4. 曹工说JDK源码(2)--ConcurrentHashMap的多线程扩容,说白了,就是分段取任务

    前言 先预先说明,我这边jdk的代码版本为1.8.0_11,同时,因为我直接在本地jdk源码上进行了部分修改.调试,所以,导致大家看到的我这边贴的代码,和大家的不太一样. 不过,我对源码进行修改.重构 ...

  5. 内存管理,goto的使用,内存的申请和释放,mmap,ioremap

    1.内存管理 (将物理内存映射到内核空间(3G~4G)并使用)  深入内核: 伙伴系统 1.1基本概念    1)linux内核管理内存是以物理内存页为单位       一个物理内存页通常为4KB   ...

  6. PyQt中QThread多线程的正确用法【待完善】

    先贴几篇有意思的讨论 https://www.qt.io/blog/2010/06/17/youre-doing-it-wrong#commento-login-box-container https ...

  7. JVM进阶之路(一)

    JVM是Java程序运行的基本,了解Java程序的运行原理绝对有必要了解JVM的内容,JVM的内容其实很多,而且版本不同,其中的内容也很多不同,接下来就通过几篇文章来慢慢讲述JVM的内容. 一.Jvm ...

  8. Android学习笔记主题(Theme)资源文件

    安卓的主题资源文件,可以用于对Android应用的美化. styles文件是主题资源文件. 定义一个主题资源格式如下: <resources> <!-- Base applicati ...

  9. 简单梳理JavaScript垃圾回收机制

    JavaScript具有自动垃圾回收机制,即执行环境会负责管理代码执行过程中使用地内存. 这种垃圾回收机制的原理很简单:找出那些不再继续使用的变量,然后释放其占用的内存.为此,垃圾收集器会按照固定的时 ...

  10. opencv3.1.0 计算机中丢失 opencv_world310d.dll _vs2017解决方法

    ---------------------------opencv1.exe - 系统错误---------------------------无法启动此程序,因为计算机中丢失 opencv_worl ...