使用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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
25个CSS3动画按钮和菜单教程分享
Oct 03 HTML / CSS
canvas之万花筒效果的简单实现(推荐)
Aug 16 HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5中微数据概述及在搜索引擎中的使用举例
Feb 07 HTML / CSS
html5各种页面切换效果和模态对话框用法总结
Dec 15 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
AmazeUI在模态框中嵌入表单形成模态输入框
Aug 20 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
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php生成数组的使用示例 php全组合算法
2014/01/16 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
php实现查询功能(数据访问)
2017/05/23 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
Javascript 汉字字节判断
2009/08/01 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
2010/08/03 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
window.location.href中url中数据量太大时的解决方法
2013/12/23 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
2014/04/20 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JavaScript中用toString()方法返回时间为字符串
2015/06/12 Javascript
javascript实现树形菜单的方法
2015/07/17 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JavaScript取得gridview中获取checkbox选中的值
2017/07/24 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
[05:04]DOTA2上海特级锦标赛主赛事第二日TOP10
2016/03/04 DOTA
Python生成随机数的方法
2014/01/14 Python
Python实现统计英文单词个数及字符串分割代码
2015/05/28 Python
python中模块的__all__属性详解
2017/10/26 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
python使用Matplotlib画饼图
2018/09/25 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python的launcher用法知识点总结
2020/08/07 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
html5移动端自适应布局的实现
2020/04/15 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
小学师德师风整改措施
2014/10/27 职场文书
学习普通话的体会
2014/11/07 职场文书
解决 Redis 秒杀超卖场景的高并发
2022/04/12 Redis