黑马程序员技术交流社区

标题: 【广州前端】- CSS炫酷的悬浮效果 [打印本页]

作者: AngularBaby 时间: 2018-5-24 15:59
标题: 【广州前端】- CSS炫酷的悬浮效果
本帖最后由 AngularBaby 于 2018-5-24 16:02 编辑

Demo 效果：

Demo代码如下：

1. 页面body中放置一个button按钮：

[HTML] 纯文本查看 复制代码

    <button class="button" style="display:block;margin: 100px auto;width:400px;">

        <span>悬浮效果</span>

    </button>

2. 获取鼠标位置

[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`)

}

i. 选择元素，等待，直到用户将鼠标移过它；
ii. 计算相对于元素的位置；

iii. 将坐标存在CSS的变量中。

3. 使用CSS变量生成炫酷的效果

[CSS] 纯文本查看 复制代码

.button {

  text-align: center;

  position: relative;

  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;

}

PS：用span包裹文本，以避免显示在按钮的上方

点击查看更多精彩前端资源

Demo案例详见附件

悬浮.zip

1.63 KB, 阅读权限: 10, 下载次数: 1

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2