专栏首页酷猫小窝利用 CSS 变量实现悬浮效果

利用 CSS 变量实现悬浮效果

最近,我从 Grover网站上发现以一个好玩儿的悬停动画,也有了些自己的灵感。这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变。这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率。

利用 CSS 变量实现令人震惊的悬浮效果

怎样才能达到这个效果,使我们的网站脱颖而出呢?其实,它并不像你想象的那么难!

追踪位置

我们要做的第一件事就是获取到鼠标的位置。document.querySelector(‘.button’).onmousemove = (e) => {const x = e.pageX – e.target.offsetLeftconst y = e.pageY – e.target.offsetTope.target.style.setProperty(‘–x’, `

是的,仅仅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。不要忘了设置这种转换以使其像风一样

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress批量替换url的方法 更换域名 搬家 图片外链用的到

    前不久更换了域名,随之而来的就是各种图片附件等url的问题,网上找来了几种批量替换url的方法,总结一下方便以后使用。

    叮当叮
  • 通过代码WordPress文章超过N天未更新提示

    方法:复制以下代码添加至文章页面Single.php 添加至合适的位置其中代码中的180为180天,可根据需要自行修改。

    叮当叮
  • Appnode面板 – 除宝塔外又一强大Linux服务器面板

    Appnode除宝塔面板外又一强大面板,功能上比宝塔全面一点,可能界面稍微复杂了一些没有宝塔简介,不过熟悉熟悉就好了,对新手也是十分的友好的。重度使用更不用说了...

    叮当叮
  • 给单元素艺术添加动画

    原文:Animating Single Div Art 翻译:nzbin 导读:学习工具的最好的方法就是尝试新技术,本文通过“单元素艺术”介绍了 CSS 变量的...

    叙帝利
  • 在ubuntu下安装wordpress + sqlite

    apt-get install apache2 libapache2-mod-php5

    超级大猪
  • 9102年了,你还不知道怎么做数据科学家吗?

    AI 科技评论按:本文作者 Thomas Nield,是美国西南航空公司的商务顾问,著有《Getting Started with SQL (O'Reilly)...

    AI研习社
  • 从术语到Spark,10篇必读大数据学习资源

    大数据文摘
  • 训练场优秀题解-尼科彻斯定理【图文并茂】

    原题链接:【C语言训练】尼科彻斯定理 http://www.dotcpp.com/oj/problem1127.html 解题思路: 首先,定义整数N;写出N从...

    编程范 源代码公司
  • 论道大数据:灵性文明、数据阴影、平行宇宙这些概念你知道吗?

    由阿里研究院主办的“2016新经济智库大会”于1月16日在北京香格里拉饭店举行。全球智库及专家学者聚首中国北京,深入研讨全球新经济的现状与趋势、新经济促进全球经...

    灯塔大数据
  • Apache Solr最新RCE漏洞分析

    Apache Solr爆出RCE 0day漏洞(漏洞编号未给出),这里简单的复现了对象,对整个RCE的流程做了一下分析,供各位看官参考。

    FB客服

扫码关注云+社区

领取腾讯云代金券