CSS
黑客
CSS
Hack 可以改变
元素
的样式。 它能够改变伪
元素
，如:after 、 :before和:hover 。 设置自己的样式很容易，也很容易反映和重置样式到
元素
。
// 1. Create Instance
var
Css
= new
Css
Hack ( ) ;
// if you need '!important' to all in style try this
// var
Css
= new
Css
Hack(true);
// 2. Set Properties
Css
. setProp ( param ) ;
Css
. setProps ( [ param , param , ... ] ) ;
// 3. Reflect to
Css
var nodes = document . querySelectorAll ( '.hoge' ) ;
想要使用
CSS
实现
逼真的水波纹点击
效果
，可以使用
CSS
伪类:hover和transform属性来
实现
。
首先，在html中添加一个div
元素
，将其设置为圆形，并添加一个类名wave：
<div class="wave"></div>
然后在
CSS
中，给wave类设置背景颜色和圆角属性，使其呈圆形状态。将其设置为relative定位，并设置宽高为100px。
接下来，使用伪类:hover来
实现
鼠标悬浮时的水波纹
效果
。给wave类设置:before伪
元素
，将其设置为绝对定位，并设置宽高为0。添加transition属性，让其变化平滑。同时，将鼠标移动的位置坐标传入:before伪
元素
的transform属性中，
实现
水波纹
效果
。
最后，通过box-shadow属性来显示水波纹的颜色，
效果
更加逼真。
完整的代码如下：
html代码：
<div class="wave"></div>
css
代码：
.wave {
width: 100px;
height: 100px;
background-color: #69c;
border-radius: 50%;
position: relative;
.wave:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
transition: all 0.5s ease;
.wave:hover:before {
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.3);
