? ?? ??? ?? CSS? ???? ???? ??? ??? ????? ?? ??? ???? JS ?? ??? ?? ?????. ??? ??? ???? ??? ? ??? ????.

?? ???? ?? CSS? ???? ??? ?? ?????? ?????, ? ????? ??? ? ?? ??? ????. ?? ???? ???? ??? ?? ??? ?????. ??? ??? ?????? ? ? ?????. ? ??? ??? ? ??? ??? ?? ??? ???? ????.

?? ?? ??? ?? ?? ??? ?????

css? ?? ??? ??? ? ? ????

?? ? ?? js

?? CSS? ?? ??? ?? ??? ???, ??? UI ????? ????. ????? ??? ???? ????. ? CSS? ??? ??? ????.

???? ??? ? ?? ??? js? ???? ?? ??? ?? ? ??? js? ??? ?? ? ??? ??? ?? ?? ???? CSS? ??? ? ????.

?? ????

css? ??? ??

??? ???? CSS? ??? ??? ??? ???? js? ???? ??? ? ??? ?? CSS? ??? ? ????.

CSS ?? ?? var, ??? ???? ????. ??? ??? ?? ??? ???? ??? ????, ??? ???? ?? ???? ????

?? IE? ???? ?? ?? ???? ??? ?????. IE???? ??? ??? ????? ??? ? ??? ????? ??? ????. ??? ?? IE的話兼容性還是可以的，就算要兼顧IE，可以保證按鈕是完好的，只是沒有動畫效果不就可以了嗎，這也是所謂的優(yōu)雅降級吧

var的用法很簡單

:root?{
????--main-bg-color:?red;
}
.container?{
????width:?20px;
????height:?20px;
????background-color:?var(--main-bg-color);/**background-color:red**/
}

有關(guān)var的詳細用法，大家可以自行百度

全能js

我們用js只有一個目的，就是獲取鼠標點擊的位置

很簡單，事件對象event中有個offsetX和offsetY就是用來描述鼠標位置相對于父元素的位置

其實這個屬性早些年是IE私有的，谷歌和火狐看著好用，不知道從上面版本也都支持了，所以兼容性沒太大問題~

var?x?=?event.offsetX;
var?y?=?event.offsetY;

具體實現(xiàn)

我們需要在點擊的時候獲取到左邊，然后存在css變量中

示例代碼

function?ripple(ev){
??var?x?=?ev.offsetX;
??var?y?=?ev.offsetY;
??this.style.setProperty('--x',x+'px');
??this.style.setProperty('--y',y+'px');
}

沒錯，就這么一丁點js

相應(yīng)的css部分我們要拿到我們保存的變量，來改變中心點的位置

.btn>span:after{?
??content:?'';?
??position:?absolute;?
??background:?transparent;?
??border-radius:50%;?
??width:?100%;?
??padding-top:?100%;?
??margin-left:?-50%;?
??margin-top:?-50%;?
??left:?var(--x,-100%);?
??top:?var(--y,-100%);?
}

這里我們解決了兩個問題，

首次進來會觸發(fā)一次：這里我們把left給了一個默認值-100%

left:?var(--x,-100%);

也就是說，當前面的--x沒有值或者非法的時候就會取后面一個值，-100%??? ??????

??? ???. var? ???? ?? ?????

<label class="btn" tabindex="1">
<input type="checkbox"><span onclick="ripple(this,event)">button</span>
</label>

var? ??? ???? ??? Baidu? ?? ? ? ????

??? js

??? js? ??? ?? ??? ?? ? ? ?? ????? ?????.

?? ?????. ??? ?? ????? ?? ??? ???? ???? ??? ?????? ? ???? offsetX ? offsetY? ????. cn//upload/image/131/589/601/1540180271559462.png" title="1540180271559462.png" alt="???? ??? ??? ????? ?? ??? ???? ?? CSS js ?? ?? "/ >

?? ? ??? ?? ???? ?????? ???? ??? ????, ? ????? ?????? ? ????? ????? ? ??? ????~

????????

.btn{
 display: block; 
 width: 300px; 
 margin: 50px; 
 outline: 0; 
 overflow: hidden;  
 position: relative; 
 transition: .3s; 
 cursor: pointer; 
 user-select: none; 
 height: 100px; 
 text-align: center; 
 line-height: 100px; 
 font-size: 50px; 
 background: tomato; 
 color: #fff;  
 border-radius: 
 10px;
 }
.btn>span{
 position: absolute; 
 left: 0; top: 0; 
 width: 100%; 
 height: 100%;
 }
.btn>span:after{
 content: ''; 
 position: absolute; 
 background: transparent; 
 border-radius:50%; 
 width: 100%; 
 padding-top: 100%; 
 margin-left: -50%; 
 margin-top: -50%; 
 left: var(--x,-100%); 
 top: var(--y,-100%); 
 }
.btn:active{
 background: orangered;
 }
.btn>input[type=checkbox]{display: none}
.btn>input[type=checkbox]+span:after{animation: ripple-in 1s;}
.btn>input[type=checkbox]:checked+span:after{animation: ripple-out 1s;}
@keyframes ripple-in{
    from {
        transform: scale(0);
        background: rgba(0,0,0,.25)
    }
    to {
        transform: scale(1.5);
        background: transparent
    }
}
@keyframes ripple-out{
    from {
        transform: scale(0);
        background: rgba(0,0,0,.25)
    }
    to {
        transform: scale(1.5);
        background: transparent
    }
}

?? ?????? ?? ?? ??????? ???? ??? ??? ?? CSS ??? ??????????? ????

function ripple(dom,ev){
  console.log(ev)
  var x = ev.offsetX;
  var y = ev.offsetY;
  dom.style.setProperty('--x',x+'px');
  dom.style.setProperty('--y',y+'px');
}

???, js? ?? ?????????? CSS ???? ??? ????? ??? ??? ???? ???. ?? ?? ??rrreee????? ??? ? ?? ??? ??????. ??????? ?? ??? ? ? ? ????????: ???? left? ??? -100%? ??????. ??rrreee???, ?? --x? ?? ??? ??? ?? ?? ?? -100%? ?????. ??? ????? ????? ?? ?? ?? ???? ???? ?? ???? ????. ????????? ?? ??? ?? ????: ?? ??? ??? ????? ??? ?? ???? ???? ??? ?? ? ? ????.???????? ??????rrreeerrreeerrreee????section??????In ?? JS ??? ?? ???? CSS? ?????. CSS? JS?? ?? ?????. ?? ??? ?? ??, ?? ??? ??? ?? ??? ???? ?? ??? ???? ??? ?? ???? ??? ???? ?? ?? ??? ???? ?? ?? ????. ??? ???? ??? ????? ?? ??? ???? ???. ?? ????? ???? ??? ?? ?? ????, ????? ??? ??. ??????

? ??? ???? ??? ??? ????? ?? ??? ???? ?? CSS js ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!