失败的催眠图

尝鲜mask属性

本来想就着做一个催眠图

胃受不了，下面是半成品，留待有缘人。

<style>

.box{
　　width: 200px;
　　height: 200px;
　　-webkit-mask-image: repeating-radial-gradient(rgba(0,0,0,0) 4px, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 12px);//径向渐变遮罩，属性和background类似
　　-webkit-mask-repeat: no-repeat;
　　-webkit-mask-size:50% 50%;
　　-webkit-mask-position:center;
　　-webkit-animation: move 1s linear infinite alternate;
}
.cd{
　　width: 100%;
　　height: 100%;
　　background: -webkit-linear-gradient(top,red,blue);//基佬背景色

}
@-webkit-keyframes move{
　　from{
　　　　-webkit-mask-size:50% 50%;
　　}
　　to{
　　　　　-webkit-mask-size:100% 100%;
　　}
}

</style>

　　<div class="box">
　　　　<div class="cd"></div>
　　</div>

https://www.zhangxinxu.com/wordpress/2017/11/css-css3-mask-masks  //mask学习传送门