利用CSS变量实现炫酷的悬浮效果
最近,我从 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变量实现炫酷的悬浮效果的更多相关文章
- css3 之炫酷的loading效果
css3 之炫酷的loading效果 今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 js需要引入jquery 只用到了一点点js 先看效果图 html: ...
- 一个炫酷的Actionbar效果
今天在网上看到一个炫酷的Actionbar效果,一个老外做的DEMO,目前很多流行的app已经加入了这个效果. 当用户初始进入该界面的时候,为一个透明的 ActiionBar ,这样利用充分的空间显示 ...
- [css]演示:纯CSS实现的右侧底部简洁悬浮效果
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name ...
- 巧妙的实现 CSS 斜线(炫酷的小效果)
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果 ...
- 如何利用GitHub设计一个炫酷的个人网站(含代码)
1.在开始制作之前我们先预览一下我的网站吧! 1.方式一: 由于是手机版的所以用手机访问下面的链接体验比较好一点: https://tom-shushu.github.io/MyWeb.github. ...
- 利用GitHub制作在线炫酷简历
首先我们先体验一下炫酷简历.然后决定我们要不要使用. https://jessezhao1990.github.... 如何使用本项目部署你自己的在线简历 1. 书写简历 在src文件夹里面有个con ...
- 纯CSS实现的右侧底部简洁悬浮效果
我们见过很多页面右侧浮动效果,最早有QQ联系面板,对联广告等,大多数都是基于Javascript实现的动态效果,今天我给大家分享一个只需要CSS结合DIV实现的右侧浮动效果. HTML 我们希望悬浮效 ...
- >炫酷的计时器效果Canvas绘图与动画<
>炫丽的计时器效果Canvas绘图与动画< 虽然我是学习java的,但是因为最近使用html5的关系,多学习了一下前端知识. 现在,我要介绍的计时器是十分炫酷的,使用画布完成. 喜欢htm ...
- iOS动画开发之五——炫酷的粒子效果
在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一现,想用UIKit框架写出一款炫酷的休 ...
随机推荐
- java实现括号的匹配
括号的匹配 下面的代码用于判断一个串中的括号是否匹配 所谓匹配是指不同类型的括号必须左右呼应,可以相互包含,但不能交叉 例如: -(-[-]-)- 是允许的 -(-[-)-]- 是禁止的 对于 mai ...
- harbor私有仓库安装
准备环境 centos7.4 docker-ce 19.03.8 docker-compose version 1.18.0 harbor 版本: 1.7.5 一.安装dokcer # 安装依赖包 ...
- 基于华为云IOT及无线RFID技术的智慧仓储解决方案最佳实践系列一
[摘要]仓储管理存在四大细分场景:出入库管理.盘点.分拣和货物跟踪.本系列将介绍利用华为云IOT全栈云服务,端侧采用华为收发分离式RFID解决方案,打造端到端到IOT智慧仓储解决方案的最佳实践. 仓储 ...
- opencv 移植
1.ubunut系统搭建opencv+python开发环境 1.1.ubuntu系统安装pip3工具 sudo apt-get install python3-pip //安装python模块安装工具 ...
- 【转载】自动化魔方求解器的Bug——选择合适的色彩空间
目录 1. 准备工作-- 2. RGB颜色空间 3. LAB色彩空间 4. YCrCb色彩空间 5. HSV色彩空间 Color spaces in OpenCV (C++ / Python) 几天前 ...
- [AGC034F]RNG and XOR
题目 点这里看题目. 分析 第一步可以将\(A\)数组转化成概率\(P(j)\):每一步操作异或\(j\)的概率. 接着发现,\(x\)从\(0\)变成\(i\)的期望等于\(x\)从\( ...
- 懒羊羊找朋友(struct实现优先排序)
4907: 懒羊羊找朋友(点击) 时间限制: 1 Sec 内存限制: 128 MB ...
- Hunter’s Apprentice(判断所走路线为顺时针或逆时针)【Green公式】
Hunter's Apprentice 题目链接(点击) 题目描述 When you were five years old, you watched in horror as a spiked de ...
- 千万不要更新网易云音乐UWP!!!!!
网易云音乐UWP没了!!! 现在 Micrsoft Store 里面的是垃圾 Win32 转置版!!!! 万不可更新!!! 若已经更新,还有救回来的办法:下载 https://lanzous.com/ ...
- yaml读取封装
#!/usr/bin/env python # -*- coding: utf-8 -*- """ 对yaml格式的配置文件的操作 """ ...