关键词:
先放两张效果图。
前两天在微信公众号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标签内..当您发现这种技术似乎“ 查看详情