使用CSS变量实现炫酷惊人的悬浮效果


Posted in HTML / CSS onApril 26, 2019

最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

使用CSS变量实现炫酷惊人的悬浮效果

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

追踪位置

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

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。不要忘了设置这种转换以使其像风一样:dash:瞬间出现;
  3. 利用坐标追踪鼠标位置;
  4. 在background 属性上应用 radial-gradient,使用closest-side circle。Closest-side能够覆盖整个面。

总结
 

以上所述是小编给大家介绍的使用CSS变量实现炫酷惊人的悬浮效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

HTML / CSS 相关文章推荐
基于CSS3实现的几个小loading效果
Sep 27 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
纯css3制作网站后台管理面板
Dec 30 HTML / CSS
使用CSS3配合IE滤镜实现渐变和投影的效果
Sep 06 HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
html5中地理位置定位api接口开发应用小结
Jan 04 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
HTML基础详解(上)
Oct 16 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 #HTML / CSS
CSS3 transforms应用于背景图像的解决方法
Apr 16 #HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 #HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 #HTML / CSS
CSS3解析抖音LOGO制作的方法步骤
Apr 11 #HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 #HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 #HTML / CSS
You might like
Dedecms V3.1 生成HTML速度的优化办法
2007/03/18 PHP
PHP 采集获取指定网址的内容
2010/01/05 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
jQuery 处理网页内容的实现代码
2010/02/15 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
Jquery中$.post和$.ajax的用法小结
2015/04/28 Javascript
js实现匹配时换色的输入提示特效代码
2015/08/17 Javascript
JavaScript如何实现对数字保留两位小数一位自动补零
2015/12/18 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
2017/11/06 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[05:02][DOTA2]DOTA进化论 第一期
2013/09/27 DOTA
Python去除列表中重复元素的方法
2015/03/20 Python
python编写爬虫小程序
2015/05/14 Python
Python之Web框架Django项目搭建全过程
2017/05/02 Python
Python自动化运维_文件内容差异对比分析
2017/12/13 Python
python实现批量nii文件转换为png图像
2019/07/18 Python
Python中zip()函数的简单用法举例
2019/09/02 Python
如何基于python实现归一化处理
2020/01/20 Python
video结合canvas实现视频在线截图功能
2018/06/25 HTML / CSS
SCHIESSER荷兰官方网站:德国内衣专家
2020/10/09 全球购物
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
英语演讲稿范文
2014/01/03 职场文书
留学推荐信怎么写
2014/01/25 职场文书
联谊活动策划书
2014/01/26 职场文书
上课睡觉万能检讨书
2015/02/17 职场文书
优秀学生主要事迹怎么写
2015/11/04 职场文书
小米11和iphone12哪个值得买?小米11对比iphone12评测
2021/04/21 数码科技
关于CentOS 8 搭建MongoDB4.4分片集群的问题
2021/10/24 MongoDB