使用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特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
Dec 11 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
HTML5 localStorage使用总结
Feb 22 HTML / CSS
前端实现打印图像功能
Aug 27 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
bootstrapv4轮播图去除两侧阴影及线框的方法
Feb 15 HTML / CSS
使用CSS自定义属性实现骨架屏效果
Jun 21 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缓存函数的使用说明
2013/05/10 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
YUI的Tab切换实现代码
2010/04/11 Javascript
jQuery.holdReady()使用方法
2014/05/20 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
2014/12/15 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
2015/06/20 Javascript
js实时获取并显示当前时间的方法
2015/07/31 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
用jQuery实现可输入多选下拉组合框实例代码
2017/01/18 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
2018/02/09 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
2018/07/26 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
详解HTML5 Canvas绘制时指定颜色与透明度的方法
2016/03/25 HTML / CSS
夏季奶茶店创业计划书
2014/01/16 职场文书
银行类自荐信
2014/02/04 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
干部对照检查材料范文
2014/08/26 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2014年质检员工作总结
2014/11/18 职场文书
2014年科协工作总结
2014/12/09 职场文书
户外亲子活动总结
2015/05/08 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书
2016大学生形势与政策心得体会
2016/01/12 职场文书
Nginx 过滤静态资源文件的访问日志的实现
2021/03/31 Servers