原文地址：www.zcfy.cc/article/stunning-hover-effects-with-css-variables

效果：

主要使用css中的var做动画效果，代码如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>Document</title>

 <style type="text/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;

 }

 .button span {

     position: relative;

 }

 .button::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;

 }

 .button:hover::before {

     --size: 400px;

 }

 </style>

 </head>

 <body>

 <div class="button"><span>测试按钮</span></div>

 <script type="text/javascript">

 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`)

 }

 </script>

 </body>

 </html>

使用css3变量创建炫酷悬停效果的更多相关文章

  1. 7款纯CSS3实现的炫酷动画应用|慕课网只学有用的！

    关于我们 | 时尚廊 ♦ 时尚廊,中国大陆地区首家以"Lounge"为概念的艺文空间 ♦  7款纯CSS3实现的炫酷动画应用|慕课网只学有用的! 7款纯CSS3实现的炫酷动画应用

  2. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  3. 使用CoordinatorLayout打造各种炫酷的效果

    使用CoordinatorLayout打造各种炫酷的效果 自定义Behavior -- 仿知乎,FloatActionButton隐藏与展示 NestedScrolling 机制深入解析 一步步带你读 ...

  4. 利用CSS变量实现炫酷的悬浮效果

    最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变. 这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了 ...

  5. 7款纯CSS3实现的炫酷动画应用

    1.纯CSS3实现人物摇头动画 这次我们要来分享一款超级可爱的纯CSS3人物摇头动画,初始化的时候人物的各个部位是利用CSS3动画效果拼接而成,接下来就是人物听音乐的场景,一边听音乐一边摇着脑袋,十分 ...

  6. html5+CSS3实现的炫酷超链接特效

    今天为大家介绍一个非常炫酷的超链接特效.在你做一些前端的网页时可以在里面去用上这些前卫时尚的效果. 这些超链接特性,大都是借助伪元素.svg.HTML5动画来实现的.效果都很漂亮,不信看下面. 用你的 ...

  7. CSS3和js炫酷点击按钮3D翻转动画特效

    简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览   源码下载 ...

  8. HTML5 canvas炫酷棱镜效果的幻灯片特效

    这是一款效果很炫酷华丽的HTML5 canvas带棱镜效果的幻灯片特效. 这个特效在每个幻灯片的前面放置一个图形.并将图形制作为三棱镜效果.它底下的幻灯片图片会被"折射"到棱镜上面 ...

  9. IE的CSS滤镜不过只支持IE可以创建幻灯片等一些炫酷的效果

    <img src="img/logo.png"  style="filter:xray"/>仅仅

随机推荐

  1. sso cas 坑

    一个中文文档地址: http://www.cassso-china.cn/apereo_github_cas_5.2/apereo.github.io/cas/5.2.x/ ============= ...

  2. IdentityServer4 实现OAuth2.0四种模式之密码模式

    接上一篇:IdentityServer4 实现OAuth2.0四种模式之客户端模式,这一篇讲IdentityServer4 使用密码模式保护API访问. 一,IdentityServer配置 1,添加 ...

  3. 关于如何控制一个页面的Ajax读数据只读一次的简单解决办法！

    例如:一个页面有一个按钮,点击的时候用ajax去后台获取数据,获取成功以后返回.下次再点击的时候就不要去获取数据了. 解决办法有很多: 1.用Get方法去读数据,会缓存. 2.用jquery的data ...

  4. Java调用Http/Https接口(5)--HttpAsyncClient调用Http/Https接口

    HttpAsyncClient是HttpClient的异步版本,提供异步调用的api.文中所使用到的软件版本:Java 1.8.0_191.HttpClient 4.1.4. 1.服务端 参见Java ...

  5. kali之HexorBase数据库破解

    HexorBase 用户名密码连接数据库 暴力破解 点击底栏 Bruteforces Databases Servers , 然后会弹出一个新界面 Databases Bruteforces 新界面  ...

  6. canvas教程(一) 简介

    什么是 canvas 按例是要介绍一下 canvas 的,在没有 canvas 之前,我们为了网页的效果,很多情况下是使用了图片来实现,不过用图片就需要加载,而且图片的体积也是一个问题,所以在 htm ...

  7. Java 之 框架概述

    一.什么是框架 框架(Framework)是整个或部分系统的可重用设计,表现为一组抽象构件及构件实例间交互的方法;另一种定义认为,框架是可被应用开发者定制的应用骨架.前者是从应用方面而后者是从目的方面 ...

  8. SQL常见的一些面试题(太有用啦)

    SQL常见面试题 1.用一条SQL 语句 查询出每门课都大于80 分的学生姓名 name   kecheng   fenshu张三    语文       81张三     数学       75李四 ...

  9. react native报错处理com.android.build.api.transform.TransformException: com.android.builder.dexing.DexArchiveBuilderException: com.android.builder.dexing.DexArchiveBuilderException: Failed to process

    背景:最近准备在使用react-native开发的app中接入友盟,来进行用户行为统计,分享,授权登录等操作. 在使用的过程中,遇到了一些错误信息,在此记录一下. 在修改android目录下的buil ...

  10. termux 为 python3 添加 numpy 库

    1 本机环境 Termux v0.77 python3.8 2 配置步骤 2.1 安装 python 和 ipython apt updateapt upgradepkg install python ...