原文地址：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. WPF 像素着色器入门：使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码

    原文:WPF 像素着色器入门:使用 Shazzam Shader Editor 编写 HLSL 像素着色器代码 HLSL,High Level Shader Language,高级着色器语言,是 Di ...

  2. Java操作JSON数据(2)--Gson操作JSON数据

    Gson是Google公司发布的一个开发源码的Java库,可用于将Java对象转换为JSON字符串,也可用于将JSON字符串转换为对应的Java对象.本介绍下Gson的基本使用方法,包括序列化和反序列 ...

  3. 2019 迅雷java面试笔试题 （含面试题解析）

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.迅雷等公司offer,岗位是Java后端开发,最终选择去了迅雷. 面试了很多家公司,感觉大部分公司考察的点都差不多 ...

  4. Angular使用操作事件指令ng-click传多个参数示例

    本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="m ...

  5. Flexbox布局入门笔记

    1.display:flex 设定为Flexbox布局容器. 2.flex-direction: row表示在水平方向展开可伸缩项:column表示在垂直方向展开可伸缩项:总之就是定义主轴(侧轴方向) ...

  6. 编程风格统一配置EditorConfig

    EditorConfig 以纯原生无需任何插件支持 EditorConfig 代码风格配置的编辑器: Visual Studio 2017 开始添加了对 EditorConfig 的原生支持.Visu ...

  7. 腾讯微服务框架Tars的初体验

    最近研究了一下腾讯的微服务体系开发框架. 官方的搭建过程:https://github.com/TarsCloud/Tars/blob/master/Install.zh.md 自己填的坑: 不得不说 ...

  8. Java入门(二)——泛型

    如果你写过前端,可能会经常写一下关于变量类型的判断,比如:typeof fn === 'function'之类的代码.因为JavaScript作为一门弱类型语言,类型的判断往往需要开发人员自己去检查. ...

  9. PEP 8016-Python之父重回决策层

      PEP 8016-Python之父重回决策层 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 去年,技术社区里还发生了一件大事:Linux 之父 Linus Torvalds 宣 ...

  10. 在k8s集群部署SonarQube

    目录 1.2.存储环境 1.3.sonarqube版本 2.部署sonarqube 2.1.部署PostgreSQL 2.2.部署SonarQube 2.3.访问检查 SonarQube 是一款用于代 ...