无锡网站制作|无锡网站推广专家_无锡网站建设服务中心

无锡网站制作|无锡网站推广专家_无锡网站建设服务中心

无锡，简称“锡”，古称梁溪、金匮，是江苏省地级市，国务院批复确定的长江三角洲地区中心城市之一、重要的风景旅游城市 [1]  。截至2020年，全市下辖5个区、代管2个县级市，总面积4627.47平方千米，建成区面积552.13平方千米 [2]  。根据江苏省第七次全国人口普查结果，截至2020年11月1日零时，无锡市常住人口746.2135万人，其中城镇常住人口617.8208万人，常住人口城镇化率82.79%。 [72-73] 

无锡地处中国华东地区、江苏省南部、长江三角洲平原腹地，是苏锡常都市圈的重要组成部分。无锡北倚长江、南滨太湖，被誉为“太湖明珠”，京杭大运河穿境而过；境内以平原为主，星散分布着低山、残丘；属亚热带湿润季风气候区，四季分明，热量充足。

无锡是国家历史文化名城 [3]  ，自古就是鱼米之乡，素有布码头、钱码头、窑码头、丝都、米市之称。无锡是中国民族工业和乡镇工业的摇篮、苏南模式的发祥地，是联勤保障部队无锡联勤保障中心驻地 [4]  。无锡有太湖鼋头渚、灵山大佛、无锡中视影视基地等景点。

2017年11月，无锡市复查确认继续保留全国文明城市荣誉称号。 [5]  2018年12月，被评为2018中国大陆最佳地级城市第3名、2018中国创新力最强的30个城市之一、2018中国最佳旅游目的地城市第17名。2019年8月，中国海关总署主办的《中国海关》杂志公布2018“中国外贸百强城市”，无锡排名第11。

前言

实现鼠标点击，出现水波效果的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：

var应用2：

var应用3：

代码如下：

<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}");　　}

无锡网站制作|无锡网站推广专家_无锡网站建设服务中心