[分享]css3手机屏幕碎裂动画

CSS3手机屏幕碎裂动画是一种比较流行的UI动效，可以给移动端网页带来更加生动、有趣的交互体验。

.crack {
    width: 100%;
    height: 100%;
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;
    position: relative;
} 

.crack:before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 9999;
    background: rgba(255,255,255,0.5);
    clip-path: polygon(0 0, 0 100%, 100% 0);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.crack:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    z-index: 9999;
    background: transparent url('crack.png') no-repeat center center;
    background-size: contain;
    clip-path: polygon(0 0, 100% 0, 0 100%);
    opacity: 0.2;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.crack:hover::before {
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

.crack:hover::after {
    opacity: 1;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

上述代码采用了clip-path属性，通过控制元素显示区域的路径来实现形状的裁剪。在这里，我们设置.clip-path: polygon(0 0, 0 100%, 100% 0)来得到一个三角形的效果。

同时，利用CSS3的hover伪类，在鼠标悬浮时，通过改变clip-path和opacity属性，实现屏幕碎裂效果，从而增加网页的交互效果，提升用户体验。