用css变量实现鼠标悬停动效

萌客笔记      2022-02-12     638

关键词:

先放两张效果图。

 

前两天在微信公众号JavaScript里看到一篇文章 --- 《利用CSS变量实现令人震惊的悬浮效果》,觉得好好看好好玩,就自己动手写了一下。

  

页面DOM。

1 <div class="button"><span>Hover me I'm awesome</span></div>

 

鼠标悬停动效,顾名思义,跟鼠标是有很大关系的。首先,我们得 知道鼠标的位置

1 document.querySelector('.button').onmousemove = (e) => {
2   const x = e.pageX - e.target.offsetLeft;
3   const y = e.pageY - e.target.offsetTop;
4   e.target.style.setProperty('--x', `${ x }px`);
5   e.target.style.setProperty('--y', `${ y }px`);
6 }

1、监听元素的鼠标移动事件;

2、计算鼠标相对元素的位置;

3、将鼠标位置存入css变量中(--x,--y)。

 

利用css实现动效 

 1 .button{
 2     position: relative;
 3     appearance: none;
 4     background: #fe1251;
 5     padding: 1em 2em;
 6     border: none;
 7     color: white;
 8     font-size: 1.2em;
 9     cursor: pointer;
10     outline: none;
11     overflow: hidden;
12     border-radius: 100px;
13     transition: all .15s ease,transform .2s ease-in-out;
14   }
15   .button >span{
16     position: relative;
17     pointer-events: none;
18     /*文字禁止选中*/
19     -webkit-user-select: none;
20   }
21   .button::before {
22     --size: 0;
23     content: ' ';
24     position: absolute;
25     left: var(--x);
26     top: var(--y);
27     width: var(--size);
28     height: var(--size);
29     background: radial-gradient(circle closest-side, #402bf2, transparent);
30     transform: translate(-50%, -50%);
31     transition: width .2s ease, height .2s ease;
32   }
33   .button:hover::before {
34     --size: 400px;
35   }
36   .button:hover{
37     box-shadow: 0 5px 45px rgba(0,0,0,.4);
38     transform: scale(1.03);
39   }

 

好啦,图一炫酷的动画效果出现啦~~~

 

图二是用 css3 transform 的3D效果实现的。主要css代码是

transform: rotateX(var(--y)) rotateY(var(--x)) translateZ(var(--z));

需注意的是使用 translateZ 或其它css 3D效果,需要为3D元素的父容器设置perspective属性,用来指定视距。

 

css3 3D transform变换  可以看看https://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/

 

鼠标放上后会自动显示下级目录,这种用html可以实现吗?

参考技术A这个可以实现,用css的hover方法显示。 参考技术B可以的!使用JS操作Css对象里面的display属性就可以了CSS初始display=none,onmouseout操作display=block,onmouseover操作display=none 参考技术C呵呵可以啊你用div装下级目录,将div的display... 查看详情

使用html和css实现鼠标悬停时文本的旋转

鼠标悬停在文字上时,文字会出现旋转效果。这种效果实现的原理是,将每个文字或者单词的每个字母在任一轴(最好是Y轴)一起旋转。每个文字或者单词都包裹在<li>标记中,然后使用CSS:hoverSelector选择器,我们将在Y轴... 查看详情

利用css3实现鼠标悬停在图片上图片缓慢缩放的两种方法

1.改变background-size属性  将图片作为某个html元素的背景图片,用transition属性改变图片的大小。1.container{2background-size:100%100%;3transition:all2s;4}5.container:hover{6background-size:120%120%;7}这种方法有个问题是图片缩放的时候会出现抖动... 查看详情

为啥用css中伪类hover实现(鼠标悬停显示文字,鼠标移走文字消失)的效果失败(脚本没有错)?

...说的这种效果可以用js写追问可是这个效果用display就可以实现呢,我不想用js那么相对复杂的方法。大哥,我的问题是,我用这个实习不成功,是哪里错了呢,我看其他人用这个方法是可以点击反复显示的,不是一次性本回答被... 查看详情

css实现鼠标悬停在图片上图片缓慢缩放效果

 方法一:.container{  background-size:100%100%;  transition:all2s;}.container:hover{  background-size:120%120%;} 方法二:img{  transition:all2s;}img:hover{  transform:scale(1.2);  //图片放大的倍 查看详情

怎么用vue实现点击图片(按钮)的波纹效果(涟漪动效)

参考技术A1.先是通过鼠标的点击事件的target属性获取点击的节点,获取该节点的宽和高(offset)2.通过layerX,layerY获取鼠标位置3.播放动画wave.vue 查看详情

用wpf实现在listview中的鼠标悬停tooltip显示(代码片段)

原文:用WPF实现在ListView中的鼠标悬停Tooltip显示一、具体需求描述   在WPF下实现,当鼠标悬停在ListView中的某一元素的时候能弹出一个ToolTip以显示需要的信息。二、代码实现在.XMAL文件中 CodeCodehighlightingproducedbyActipr... 查看详情

如何实现鼠标放在图片上显示一个播放图标?

...张图片上的时候,就会出现一个播放的图标。如何才可以实现?!要什么代码?详细的步骤是怎样的?!谢谢!看图片,当鼠标滑过这个图片的时候,会出现那个播放图标,如何实现?1、用脚本(js或jquery)实现:onmouseover的时... 查看详情

html+css鼠标悬停效果

HTML+CSS实现鼠标悬停效果HTML:<linkhref="style.css"rel="stylesheet"><aclass="social"href="https://webbb.be"target="_blank"><divclass="front"><iclass="fafa-facebook"></i></div&g 查看详情

鼠标悬停图片移动的效果

...片做这种鼠标悬停图片上移,下移,左移或者右移效果,实现代码很简单,就用css3的transform便可实现。下列代码实现的是鼠标悬停,div向上移动30px,鼠标拿开div恢复原始位置。css:<style>div{margin-top:100px;width:100px;height:100px;ba... 查看详情

如何使用css在鼠标悬停时缩放图像?

...使用JavaScript使用CSS在本文中,我们将看到如何使用CSS来实现这种效果。本文包含两部分代码。第一部分包含HTML代码,第二部分包含CSS代码。HTML代码:在本文中,我们将使用HTML创建悬停效果时图像缩放的基 查看详情

html如何实现鼠标悬停显示文字,鼠标移走文字消失。

...方法二,利用css的伪类hover,以及显示隐藏属性display,来实现如下:.continerheight:100px;width:100px;background-color:aqua;.continerdivdisplay:none;/*默认隐藏*/.continer:hoverdivdisplay:initial;/*当鼠标hover时展示*/<divclass="continer">文字内容文... 查看详情

html实现鼠标悬停变成手型实现方式

1、采用a标签实现的方式1<ahref="javascript:void()">内容</a>2、采用CSS实现的方式1//变手形2oElement.style.cursor="pointer";34//恢复原样5oElement.style.cursor="default";或者1<divstyle="cursor:hand">23<imgstyle="c 查看详情

html如何实现鼠标悬停显示文字,鼠标移走文字消失。

参考技术A首先HTML布局<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>鼠标悬停</title></head><body><divtitle="我是鼠标悬停文字">我是一个DIV</div></body></html>悬停文字的问... 查看详情

css鼠标悬停图片加边框效果,不位移的方法

<!DOCTYPEHTML><htmllang="en-US"><head><title>css实现鼠标悬停时图片加边框效果</title><styletype="text/css">body{background:#222;color:#06c;}em{font-style:inherit;}img{background:w 查看详情

鼠标悬停,使用css切换图片

鼠标悬停,使用css切换图片   当鼠标悬停在li上面切换另一张图片,只需添加下述css样式即可  查看详情

css如何实现鼠标悬停在图片上底部弹出文字内容?

实现鼠标悬停在图片上底部弹出文字内容的实现方法:HTML代码:<divid="wrapper"><imgsrc="http://placehold.it/300x200"class="hover"/><pclass="text">text</p></div>CSS代码:#wrapper.textposition:relative;bottom:30px;left:0px;visibility:hidden;#wrappe... 查看详情

仅使用 CSS,将鼠标悬停在另一个元素上时显示 div

...我想在CSS而不是JavaScript中执行此操作。你知道这是如何实现的吗?【问题讨论】:div必须在a标签内..当您发现这种技术似乎“ 查看详情