原文地址：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. 阿里巴巴 Java 开发手册 (十三) 其它

    1. [强制]在使用正则表达式时,利用好其预编译功能,可以有效加快正则匹配速度. 说明:不要在方法体内定义:Pattern pattern = Pattern.compile(规则); 2. [强制] ...

  2. jQuery实现图片上传

    $('input[type="file"]').change(function(event) { var currentTarget = event.currentTarget; ...

  3. Java 之 ServletContext 对象

    ServletContext 对象 一.概念 ServletContext对象:代表整个 web 应用,可以和程序的容器(服务器)来通信. 二.获取 1.通过request 获取 方法: reques ...

  4. 代码实现排列组合【Java】

    一.代码实现 package zhen; import java.util.Arrays; public class Arrangement { /** * 计算阶乘数,即n! = n * (n-1) ...

  5. 【OEM】OEM安装维护

    [OEM]OEM安装维护 一.1  BLOG文档结构图       一.2  前言部分   一.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道 ...

  6. thrift接口描述语言 (基于thrift 0.13.0版本)

    thrift接口描述语言(IDL)用来定义thrift类型. 一个Thrift IDL文件用来生成各种语言使用的结构体和服务. IDL中包含如下部分: 1. Document Document中包含0 ...

  7. win7彻底卸载VS2015

    C盘越来越臃肿,VS2013.VS2015.VS2017以及VS2019都安装的情况下,C盘没有空间了. 系统:Win7 卸载办法: 管理员方式进cmd,执行vs_professional.exe / ...

  8. mongodb replica-set

    mongodb 主从复制 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. MongoDB 是一个介于关系数据库和非关系 ...

  9. [LeetCode] 0200. Number of Islands 岛屿的个数

    题目 Given a 2d grid map of '1's (land) and '0's (water), count the number of islands. An island is su ...

  10. 【（图） 旅游规划 (25 分)】【Dijkstra算法】

    #include<iostream> #include<cstdio> #include<algorithm> #include<cstring> us ...