使用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 完美实现圆角效果
Jul 13 HTML / CSS
用CSS3绘制三角形的简单方法
Jul 17 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
CSS3 transition 实现通知消息轮播条
Oct 14 HTML / CSS
HTML5新表单元素_动力节点Java学院整理
Jul 12 HTML / CSS
HTML5 微格式和相关的属性名称
Feb 10 HTML / CSS
使用HTML5的链接预取功能(link prefetching)给网站提速
Dec 13 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
html5的input的required使用中遇到的问题及解决方法
Apr 24 HTML / CSS
基于Html5实现的语音搜索功能
May 13 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 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默认安装产生系统漏洞
2006/10/09 PHP
Ajax实时验证用户名/邮箱等是否已经存在的代码打包
2011/12/01 PHP
hadoop常见错误以及处理方法详解
2013/06/19 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
详解php协程知识点
2018/09/21 PHP
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
2012/10/12 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
jquery图片轮播特效代码分享
2020/04/20 Javascript
jQuery实现的放大镜效果示例
2016/09/13 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
JS实现字符串转驼峰格式的方法
2016/12/16 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
Vue.js用法详解
2017/11/13 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
JS设计模式之访问者模式定义与用法分析
2018/02/05 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
学习python可以干什么
2019/02/26 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
canvas版人体时钟的实现示例
2021/01/29 HTML / CSS
Reebonz中国官网:新加坡奢侈品购物网站
2017/03/17 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
九月份红领巾广播稿
2014/01/22 职场文书
如何撰写一封出色的求职信
2014/04/27 职场文书
门面房租房协议书
2014/12/01 职场文书
地球一小时活动总结
2015/02/27 职场文书
新郎接新娘保证书
2015/05/08 职场文书
公司催款律师函
2015/05/27 职场文书
2016形势与政策学习心得体会
2016/01/12 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python