CSS mask扇形平铺转场动画效果实例页面
回到相关文章 »效果:
请选择转场类型:
代码:
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); } @keyframes seed { 0%{--seed:0}1%{--seed:1}2%{--seed:2}3%{--seed:3}4%{--seed:4}5%{--seed:5}6%{--seed:6}7%{--seed:7}8%{--seed:8}9%{--seed:9}10%{--seed:10}11%{--seed:11}12%{--seed:12}13%{--seed:13}14%{--seed:14}15%{--seed:15}16%{--seed:16}17%{--seed:17}18%{--seed:18}19%{--seed:19}20%{--seed:20}21%{--seed:21}22%{--seed:22}23%{--seed:23}24%{--seed:24}25%{--seed:25}26%{--seed:26}27%{--seed:27}28%{--seed:28}29%{--seed:29}30%{--seed:30}31%{--seed:31}32%{--seed:32}33%{--seed:33}34%{--seed:34}35%{--seed:35}36%{--seed:36}37%{--seed:37}38%{--seed:38}39%{--seed:39}40%{--seed:40}41%{--seed:41}42%{--seed:42}43%{--seed:43}44%{--seed:44}45%{--seed:45}46%{--seed:46}47%{--seed:47}48%{--seed:48}49%{--seed:49}50%{--seed:50}51%{--seed:51}52%{--seed:52}53%{--seed:53}54%{--seed:54}55%{--seed:55}56%{--seed:56}57%{--seed:57}58%{--seed:58}59%{--seed:59}60%{--seed:60}61%{--seed:61}62%{--seed:62}63%{--seed:63}64%{--seed:64}65%{--seed:65}66%{--seed:66}67%{--seed:67}68%{--seed:68}69%{--seed:69}70%{--seed:70}71%{--seed:71}72%{--seed:72}73%{--seed:73}74%{--seed:74}75%{--seed:75}76%{--seed:76}77%{--seed:77}78%{--seed:78}79%{--seed:79}80%{--seed:80}81%{--seed:81}82%{--seed:82}83%{--seed:83}84%{--seed:84}85%{--seed:85}86%{--seed:86}87%{--seed:87}88%{--seed:88}89%{--seed:89}90%{--seed:90}91%{--seed:91}92%{--seed:92}93%{--seed:93}94%{--seed:94}95%{--seed:95}96%{--seed:96}97%{--seed:97}98%{--seed:98}99%{--seed:99}100%{--seed:100} } zxx-slide .in { -webkit-mask: conic-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed))); -webkit-mask-size: 40px 40px; mask: conic-gradient(#000 calc(1% * var(--seed)), transparent calc(1% * var(--seed))); mask-size: 40px 40px; animation: seed .6s; }
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