使用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色彩
Jan 16 HTML / CSS
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
纯css3实现走马灯效果
Dec 26 HTML / CSS
使用HTML和CSS3绘制基本卡通图案的示例分享
Nov 06 HTML / CSS
解决CSS3的opacity属性带来的层叠顺序问题
May 09 HTML / CSS
使用CSS3制作一个简单的进度条(demo)
May 23 HTML / CSS
鲜为人知的HTML5语音合成功能
May 17 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
Jun 23 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
萌新的HTML5 入门指南
Nov 06 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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 模拟POST|GET操作实现代码
2010/07/20 PHP
解析数组非数字键名引号的必要性
2013/08/09 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
项目实践之javascript技巧
2007/12/06 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
js导出txt示例代码
2014/01/14 Javascript
jQuery操作CheckBox的方法介绍(选中,取消,取值)
2014/02/04 Javascript
jQuery的animate函数实现图文切换动画效果
2015/05/03 Javascript
jquery实现的缩略图预览滑块实例
2015/06/25 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
AngularJS的ng Http Request与response格式转换方法
2016/11/07 Javascript
关于Node.js的events.EventEmitter用法介绍
2017/04/01 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
如何用C代码给Python写扩展库(Cython)
2019/05/17 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
详解pycharm配置python解释器的问题
2020/10/15 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
房地产销售员的自我评价分享
2013/12/04 职场文书
送货司机岗位职责
2013/12/11 职场文书
毕业设计计划书
2014/01/09 职场文书
优秀教师获奖感言
2014/01/31 职场文书
本科毕业生求职自荐信
2014/04/09 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
党的群众路线教育实践活动对照检查材料(教师)
2014/09/24 职场文书
唐山大地震的观后感
2015/06/05 职场文书
PHP解决高并发问题
2021/04/01 PHP
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
Vue监视数据的原理详解
2022/02/24 Vue.js