原文地址：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. ASP.NET MVC 页面静态化操作的思路

    本文主要讲述了在asp.net mvc中,页面静态化的几种思路和方法.对于网站来说,生成纯html静态页面除了有利于seo外,还可以减轻网站的负载能力和提高网站性能.在asp.net mvc中,视图的 ...

  2. vue动态加载不同的组件（分内部和外部组件）

    <!DOCTYPE html> <html> <head> <title> hello world vue </title> <met ...

  3. openresty应用场景以及研发网关系统功能说明

    openresty主要应用场景 Web应用 进行一些业务逻辑处理,甚至进行耗CPU的模板渲染,一般流程:mysql/redis/http获取数据.业务处理.产生JSON/XML/模板渲染内容,比如京东 ...

  4. RabbitMq 消息队列 在Python端的应用

    https://www.cnblogs.com/Xuuuuuu/p/10895552.html rabbit_server持久化,消费者端手动确认保证消息不会丢失.具体代码如下: 1对1生产者端代码: ...

  5. Linux--重要文件

    目录 /etc/resolv.conf /etc/host /etc/sysconfig/network /etc/fstab /etc/rc.local /etc/profile /etc/bash ...

  6. Eclipse上Maven环境配置使用

    1. 安装配置Maven: 1.1 从Apache网站 http://maven.apache.org/ 下载并且解压缩安装Apache Maven. Maven下载地址: http://maven. ...

  7. MySQL- Host 'xxx' is not allowed to connect to this MySQL server.

    mysql中有个系统数据库mysql,里面有张表user记录该实例的用户及其权限. 第一种方法 将其用户root的host改为%,即允许所有客户端连接. FLUSH PRIVILEGES;是将修改生效 ...

  8. Kubernetes pod平滑迁移

    pod平滑迁移 使用到的命令 (cordon, drain, uncordon)这三个命令是正式release的1.2新加入的命令,三个命令一起介绍,是因为三个命令配合使用可以实现节点的维护.在1.2 ...

  9. Gtest：事件

    前言 有时候在测试的时候,我们会在测试前做一些初始化活动,和测试后做一些清理工作,gtest提供了多种事件机制,非常方便我们在案例之前或之后做一些操作.总结一下gtest的事件一共有3种: 全局的,所 ...

  10. Python的高级文件操作（shutil模块）

    Python的高级文件操作(shutil模块) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果让我们用python的文件处理来进行文件拷贝,想必很多小伙伴的思路是:使用打开2个 ...