CSS代码：
zxx-slide {
display: block;
width: 250px; height: 186px;
position: relative;
}
.zxx-slide-a {
position: absolute;
display: none;
}
.zxx-slide-a.in {
z-index: 1;
}
.zxx-slide-img {
display: block;
width: 250px; height: 186px;
}
.zxx-slide-index-x {
position: absolute;
left: 0; right: 0; bottom: 10px;
text-align: center;
font-size: 0;
z-index: 1;
}
.zxx-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;
}
.zxx-slide-index.active {
background-color: rgba(255,0,0,.9);
}
/* 动画细节在这里 */
zxx-slide .in {
-webkit-mask: url(./heart.svg) no-repeat center;
-webkit-mask-size: 200% 300%;
mask: url(./heart.svg) no-repeat center;
mask-size: 200% 300%;
/* 动画 */
animation: maskHeartIn 1s both;
}
@keyframes maskHeartIn {
from {
-webkit-mask-size: 0% 0%;
mask-size: 0% 0%;
}
to {
-webkit-mask-size: 200% 300%;
mask-size: 200% 300%;
}
}
HTML代码：
<zxx-slide>
<div class="zxx-slide-x">
<a href class="zxx-slide-a" style="display: block;"><img class="zxx-slide-img" src="./ps1.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="./ps2.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="./ps3.jpg"></a>
<a href class="zxx-slide-a"><img class="zxx-slide-img" src="./ps4.jpg"></a>
</div>
<div class="zxx-slide-index-x">
<button class="zxx-slide-index active"></button>
<button class="zxx-slide-index"></button>
<button class="zxx-slide-index"></button>
<button class="zxx-slide-index"></button>
</div>
</zxx-slide>
JS代码：
./zxx-slide-demo.js
