html按钮悬浮效果,CSS3+JS实现按钮的悬浮效果–FakinsBlog 今天我们来做⼀个css3炫酷的按钮，如图所⽰:
说到这⾥肯定有⼈会说了，这么简单的东西，不就是⼀个渐变按钮吗？⾮也⾮也，这是⼀个⿏标经过时才显⽰渐变，⽽渐变在按钮内是跟随你的⿏标移动的！
咱们具体来看看怎么实现吧！
0、结构
button
结构很简单主要就是button⾥⾯包裹两个div⼀个是⽂字，另外⼀个是渐变层
1、追踪⿏标位置
我们要做的第⼀件事情就是通过js去追踪⿏标经过按钮是的x轴和y轴的位置，然后改变中间渐变层的位置！
var gradient=document.querySelector('.gradient')
document.querySelector('.button').onmousemove = (e) => {
const x = e.pageX;//⿏标位置x轴
const y = e.pageY//y轴
gradient.style.setProperty('left',`${ x }px`)
gradient.style.setProperty('top',`${ y }px`)
}
2、给点动画和样式
.button {
position: relative;
font-size: 14px;
line-height: 1.45;
font-weight: 700;
min-height: 45px;
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;js控制css3动画触发
text-transform: uppercase;
border-radius: 100px;
padding: 12px 20px 8px;
color: #333;
border: none;
background-color: transparent;
transition: all .15s ease,transform .2s ease-in-out;
color: #fff;
border-color: #fe1251;
background-color: #fe1251;
cursor: pointer;
justify-content: center;
}
.
text {
position: relative;
z-index: 2
}
.gradient{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 0;
content: " ";
display: block;
background: -webkit-radial-gradient(center,ellipse cover,#402bf2 0,#f6174e 50%); transition: width .4s ease-in-out,height .4s ease-in-out;
transform: translate(-50%,-50%);/*关键*/
border-radius: 50%;
z-index: 1;
}
.button:hover .gradient{
width: 225%;
height: 810px;
}
其他的很简单，咱们需要重点看下渐变层的样式中的transform: translate(-50%,-50%)；这个很关键，这个是确定渐变层垂直居中的，⾄于其他渐变背景啊和transition动画啊，都是⽐较简单的，这⾥就不过多的描述了。
3、演⽰demo
Fakin-css3炫酷按钮
.button {
position: relative;
font-size: 14px;
line-height: 1.45;
font-weight: 700;
min-height: 45px;
overflow: hidden;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
text-transform: uppercase;
border-radius: 100px;
padding: 12px 20px 8px;
color: #333;
border: none;
background-color: transparent;
transition: all .15s ease,transform .2s ease-in-out;
color: #fff;
border-color: #fe1251;
background-color: #fe1251;
cursor: pointer;
justify-content: center;
}
.text {
position: relative;
z-index: 2
}
.
gradient{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 0;
height: 0;
content: " ";
display: block;
background: -webkit-radial-gradient(center,ellipse cover,#402bf2 0,#f6174e 50%); transition: width .4s ease-in-out,height .4s ease-in-out;
transform: translate(-50%,-50%);
border-radius: 50%;
z-index: 1;
}
.button:hover .gradient{
width: 225%;
height: 810px;
}
button
var gradient=document.querySelector('.gradient')
document.querySelector('.button').onmousemove = (e) => {
const x = e.pageX;
const y = e.pageY;
gradient.style.setProperty('left', `${ x }px`)
gradient.style.setProperty('top', `${ y }px`)
}
提⽰：你可以先修改部分代码再运⾏。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。