使用CSS变量实现炫酷惊人的悬浮效果
发布时间：2019-04-26 09:58:02 作者：果冻 
我要评论
我要评论这篇文章主要介绍了使用CSS变量实现炫酷惊人的悬浮效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
最近，我从 Grover网站上发现以一个好玩儿的悬停动画，也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单，但是它能使这个按钮脱颖而出，人们一下子就注意到它了，增加了点击的概率。
怎样才能达到这个效果，使我们的网站脱颖而出呢？其实，它并不像你想象的那么难！
追踪位置
我们要做的第一件事就是获取到鼠标的位置。
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`)
}
- 选择元素，等待，直到用户将鼠标移过它；
- 计算相对于元素的位置；
- 将坐标存在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;
}
}
- 用span包裹文本，以避免显示在按钮的上方。
- 将 width和height初始化为0px，当用户悬停在按钮上时，将其改为400px。不要忘了设置这种转换以使其像风一样:dash:瞬间出现；
- 利用坐标追踪鼠标位置；
- 在background 属性上应用 radial-gradient，使用closest-side circle。Closest-side能够覆盖整个面。
总结
以上所述是小编给大家介绍的使用CSS变量实现炫酷惊人的悬浮效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
相关文章
是一款基于animation，transform属性制作发光悬浮的粒子上升动画特效，无数粒子在上升的过程中不断的闪烁发光，犹如萤火虫在夜空中不停的飞舞，非常有意思2018-10-26
这是一款基于纯CSS3实现发光的悬浮荧光屏动画效果源码。画面上悬浮显示出一个发光的荧光屏，且荧光屏的屏幕面上还会随着屏幕的运动而折射出不同的发光显示动画效果。荧光屏2018-06-12
这篇文章主要介绍了css实现悬浮效果的阴影的方法示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-23
是一款基于jQuery与css3属性制作网页悬浮的圆形弹性菜单，鼠标按住拖动可以将菜单到任意位置的效果代码，同时，鼠标放在菜单上会出现高亮的效果，非常不错，欢迎有需要此段2018-03-06
css3实现的鼠标悬浮3D转动二级下拉导航菜单动画特效源码是一段实现了，将鼠标悬浮在导航栏上后，会3D转动出二级下拉菜单导航动画效果代码，本段代码适应于所有网页使用，有2017-04-14
css3实现的多种3d纸张鼠标悬浮特效源码是一段实现了鼠标路过或悬浮在3D纸张选项上，相应的3d纸张就会做出不同的特效，本段代码适应于所有网页使用，有需要的朋友们可以前来2017-04-06- 这篇文章运用实例代码给大家介绍了利用CSS3如何实现按钮鼠标悬浮光圈效果，有需要的朋友们可以参考学习，下面来一起看看吧。2016-09-11
- 这篇文章给大家分享了两个鼠标悬浮出现说明遮罩层的效果，大家可以根据自己的需要选择某一种效果，两种效果文中都给出了实例代码，下面来一起看看吧。2016-09-05
本文给大家分享的基于css3实现右侧悬浮在线客服源码，几乎是用css实现的，所以不支持低版本浏览器，需要的朋友可以参考下。2015-09-02
CSS3实现网页右侧悬浮固定二维码扫描与在线客服等功能特效源码
这是一款基于CSS3实现在网页右侧悬浮固定二维码扫描与在线客服等功能的代码，是一款非常优秀的特效源码2015-08-24
最新评论