CSS clip-path四角星到矩形转场动画效果实例页面

CSS代码：

zxx-slide {
    display: block;
    width: 250px; height: 186px;
    position: relative;
}
.zhxx-slide-a {
    position: absolute;
    display: none;
}
.zhxx-slide-a.in {
    z-index: 1;
}
.zhxx-slide-img {
    display: block;
    width: 250px; height: 186px;
}
.zhxx-slide-index-x {
    position: absolute;
    left: 0; right: 0; bottom: 10px;
    text-align: center;
    font-size: 0;
    z-index: 1;
}
.zhxx-slide-index {
    display: inline-block;
    width: 20px; height: 20px;
    padding: 0; margin: 0;
    box-sizing: border-box;
    border: 5px solid transparent;
    background-color: rgba(0,0,0,.6);
    background-clip: content-box;
    border-radius: 50%;
    transition: background-color .3s;
    cursor: pointer;
}
.zhxx-slide-index.active {
    background-color: rgba(255,0,0,.9);
}
/* 动画细节在这里 */
zxx-slide .in {
    animation: clipRectSpIn .6s;
}
@keyframes clipRectSpIn {
    0%   { 
        -webkit-clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
        clip-path: polygon(50% 20%, 50% 50%, 20% 50%, 50% 50%, 50% 80%, 50% 50%, 80% 50%, 50% 50%);
    }
    100% {
        -webkit-clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
        clip-path: polygon(50% 0%, 0% 0%, 0% 50%, 0% 100%, 50% 100%, 100% 100%, 100% 50%, 100% 0%);
    }
}

HTML代码：

<zxx-slide>
    <div class="zhxx-slide-x">
        <a href class="zhxx-slide-a" style="display: block;"><img class="zhxx-slide-img" src="./ps1.jpg"></a>
        <a href class="zhxx-slide-a"><img class="zhxx-slide-img" src="./ps2.jpg"></a>
        <a href class="zhxx-slide-a"><img class="zhxx-slide-img" src="./ps3.jpg"></a>
        <a href class="zhxx-slide-a"><img class="zhxx-slide-img" src="./ps4.jpg"></a>
    </div>
    <div class="zhxx-slide-index-x">
        <button class="zhxx-slide-index active"></button>
        <button class="zhxx-slide-index"></button>
        <button class="zhxx-slide-index"></button>
        <button class="zhxx-slide-index"></button>
    </div>
</zxx-slide>

JS代码：

./zhxx-slide-demo.js