炫意html5
最早CSS3和HTML5移动技术网站之一

利用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进度条

代码如下:

<style>
.炫H5bar {
height: 20px; width: 300px;
background-color: #f5f5f5;
margin: 5px 0 10px;
}
.炫H5bar::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></div>
<label>var应用bar2:</label>
<div></div>
<label>var应用bar3:</label>
<div></div>

鼠标点击文字动画

效果如下:

enter image description here

代码如下:

<style>
body:active::after {
transform: translate(-50%, -100%);
opacity: 0.5;
transition: 0s;
left: -999px;
}
body::after {
content: 'xyhtml5.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}");
  }

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

Java基础教程Android基础教程