Vue<粘性按钮效果>

2021-01-20 11-20-31.gif

类似效果地址:Vue<自定义鼠标指针效果>

知识点:

  1. 背景融合,实现鼠标移动到按键上合成不同的颜色效果
mix-blend-mode: difference;

2.isolation CSS属性定义该元素是否必须创建一个新的层叠上下文,一般是配合mix-blend-mode使用

/*如果不单独使用,背景颜色将被考虑进去*/
isolation: isolate;
  1. 禁止选择器方法,实现跟随鼠标的标签不会默认被点击
pointer-events: none;

4.css兄弟选择器

[cursor='link']:active ~ .cursor

5.3D旋转 rotate3d

  /* 
    x:是一个0到1之间的数值,主要用来描述元素围绕X轴旋转的矢量值;
    y:是一个0到1之间的数值,主要用来描述元素围绕Y轴旋转的矢量值;
    z:是一个0到1之间的数值,主要用来描述元素围绕Z轴旋转的矢量值;
    a:是一个角度值,主要用来指定元素在3D空间旋转的角度,如果其值为正值,元素顺时针旋转,反之元素逆时针旋转
    rotateX(a)函数功能等同于rotate3d(1,0,0,a)
    rotateY(a)函数功能等同于rotate3d(0,1,0,a)
    rotateZ(a)函数功能等同于rotate3d(0,0,1,a)
     */
  transform:rotate3d(0, 0, 0, 0deg)

代码如下:

<template>
  <div class="overall">
    <div class="container">
      <div class="button one" cursor="link">button1</div>
      <div class="button two" cursor="link">button2</div>
      <div class="button three" cursor="link">button3</div>
      <div class="cursor"></div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.cursor()
      this.mousemove()
      this.mouseleave()
    },
    //鼠标执行方法
    cursor() {
      let cursor = document.querySelector('.cursor')
      document.addEventListener('mousemove', function(e) {
        cursor.style.left = e.clientX - 25 + 'px'
        cursor.style.top = e.clientY - 25 + 'px'
      })
    },
    mousemove() {
      let buttons = document.querySelectorAll('.button')
      buttons.forEach(el => {
        el.addEventListener('mousemove', function(e) {
          /* getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性 */
          //   https://www.jianshu.com/p/824eb6f9dda4
          const pos = el.getBoundingClientRect()
          const mx = e.clientX - pos.left - pos.width / 2
          const my = e.clientY - pos.top - pos.height / 2

          el.style.transform =
            'translate(' + mx * 0.15 + 'px, ' + my * 0.3 + 'px)'
          el.style.transform +=
            'rotate3d(' + mx * -0.1 + ', ' + my * -0.3 + ', 0, 12deg)'
        })
      })
    },
    mouseleave() {
      let buttons = document.querySelectorAll('.button')
      buttons.forEach(el => {
        el.addEventListener('mouseleave', function(e) {
          el.style.transform = 'translate3d(0px, 0px, 0px)'
          el.style.transform = 'rotate3d(0, 0, 0, 0deg)'
        })
      })
    }
  }
}
</script>
<style >
</style>
<style lang="scss" scoped>
$cursorSize: 50px;
.overall {
  background: #dbfbff;
}
/* 鼠标样式 */
.cursor {
  pointer-events: none; //禁止选择器方法
  border-radius: 50%;
  z-index: 999;
  background: none;
  position: fixed;
  left: -$cursorSize;
  top: -$cursorSize;
  width: $cursorSize;
  height: $cursorSize;
  border-radius: 50%;
  border: 2px solid #ccc;
  transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
/* 鼠标放在按钮上 仿鼠标标签的样式变化 */
[cursor='link']:hover ~ .cursor {
  mix-blend-mode: difference;
  transform: scale(1.5);
  background: #fff;
  border-color: #fff;
}
/* 鼠标点击按钮  仿鼠标标签的样式变化 */
[cursor='link']:active ~ .cursor {
  transform: scale(0.8);
}
.container {
  /* https://developer.mozilla.org/zh-CN/docs/Web/CSS/isolation */
  isolation: isolate; /*如果不单独使用,背景颜色将被考虑进去*/
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.button {
  border-radius: 2px;
  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.1);
  cursor: none;
  display: inline-block;
  padding: 10px 20px;
  color: white;
  font-size: 20px;
  font-weight: 200;
  margin: 0 20px;
  outline: none;
  user-select: none;
  transition: transform 0.1s linear, color 0.1s linear, background 0.15s linear;
}
.button.one {
  background: #4f29f0;
}
.button.two {
  border: 1px solid #5a5a5a;
  color: #5a5a5a;
  background: none;
}
.button.three {
  background: #12d0e9;
}
</style>

推荐阅读更多精彩内容

  • ## 你可能会用到的css属性 > css语言相对简单,css的属性值就这么多,没有太多逻辑性,没有算法,熟记各个...
    流年_7fec阅读 28评论 0 0
  • 引用CSS方式 内部引用 html文件中写一个 标签,并将样式写入到里面,举例: 外部引用 通过 标签实现,里面有...
    dawsonenjoy阅读 84评论 0 0
  • 第一部分:变形介绍 自层叠样式表诞生以来,元素始终是矩形的,而且只能沿着横轴和纵轴放置。有些技巧能让元素看起来是倾...
    侠客有情剑无情QAQ阅读 618评论 0 15
  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 3,683评论 13 21
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    迷月闪星情阅读 5,191评论 0 6