利用css3变量制作鼠标点击水波效果及calc编译问题

前言

实现鼠标点击，出现水波效果的css实现很多，网上可以查到很多。但是今天的这个实现是我看到最简单的，也是对我很有启发的，因此，记录一下。一起分享。

实现原理

通过一段js代码，设置css变量var 的，x，y的值，然后通过css 实现

js代码大致如下：

this.btn.addEventListener('mousedown',function(ev){
    //ev.preventDefault();
    //ev.stopPropagation();
    if(!this.disabled){
        const { left, top } = this.getBoundingClientRect();
        this.style.setProperty('--x',(ev.clientX - left)+'px');
        this.style.setProperty('--y',(ev.clientY - top)+'px');
    }
})

css 代码如下：

.btn::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: var(--x,0); 
    top: var(--y,0);
    pointer-events: none;
    background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);
    background-repeat: no-repeat;
    background-position: 50%;
    transform: translate(-50%,-50%) scale(10);
    opacity: 0;
    transition: transform .3s, opacity .8s;
}
.btn:not([disabled]):active::after {
    transform: translate(-50%,-50%) scale(0);
    opacity: .3;
    transition: 0s;
}

实现效果

效果请看 https://xy-ui.codelabo.cn/docs/#/xy-button

上面的代码就是这个组件库里面的代码这个思路对你有无启发？

延伸

通过上面的的思路，我们可以做很多其他的动画效果。例如：

bar进度条

var应用1：

代码如下：

<style>
.haoroomsbar {
    height: 20px; width: 300px;
    background-color: #f5f5f5;
    margin: 5px 0 10px;
}
.haoroomsbar::before {
counter-reset: progress var(--percent);
content: counter(progress) '%\2002';
display: block;
width: calc(300px * var(--percent) / 100);
font-size: 12px;
color: #fff;
background-color: #2486ff;
text-align: right;
white-space: nowrap;
overflow: hidden;
}
</style>
<label>var应用bar1：</label>
<div class="haoroomsbar" style="--percent: 80;"></div>
<label>var应用bar2：</label>
<div class="haoroomsbar" style="--percent: 60;"></div>
<label>var应用bar3：</label>
<div class="haoroomsbar" style="--percent: 30;"></div>

鼠标点击文字动画

效果如下：

代码如下：

<style>
    body:active::after {
    transform: translate(-50%, -100%);
    opacity: 0.5;
    transition: 0s;
    left: -999px;
}
body::after {
    content: 'haorooms.com';
    position:fixed;
    z-index: 999;
    left: calc(var(--clientx, -999) * 1px);
    top: calc(var(--clienty, -999) * 1px);
    transform: translate(-50%, calc(-100% - 20px));
    opacity: 0;
    transition: transform .3s, opacity .5s;
}
</style>
<script>
      document.addEventListener('mousedown', function (event) {
          var target = event.target;
          var body = document.body;
          var html = document.documentElement;

          // 设置自定义属性值
          body.style.setProperty('--pagex', event.pageX);
          body.style.setProperty('--pagey', event.pageY);

          html.style.setProperty('--clientx', event.clientX);
          html.style.setProperty('--clienty', event.clientY);
          html.style.setProperty('--scrolly', window.pageYOffset);

          target.style.setProperty('--offsetx', event.offsetX);
          target.style.setProperty('--offsety', event.offsetY);
      });
</script>

calc less 编译问题

上面代码中有用到calc，但是我们假如用less编译器编译的话，calc编译就会出现问题

例如如下代码

　div {
　　width : calc(100% - 30px);
　　}

在less中编译成了

    div {
    　　width: calc(70%);
    　　}

我们通过如下写法就可以正常编译，

　div {
　　width : calc(~"100% - 30px");
　　}

假如遇到变量，我们可以通过如下方式，顺利通过编译

　　div {
　　@diff : 30px;
　　width : calc(~"100% - @{diff}");
　　}