下面是完整的样式： .scrollable-container { --show-top-mask: 0; --show-bottom-mask: 0; --mask-size: 25px...; --gradient: linear-gradient(to bottom, transparent 0%, white calc(var(--show-top-mask) * var(--mask-size...)),white calc(100% - calc(var(--mask-size)*var(--show-bottom-mask))), transparent 100%); -webkit-mask
与上述的代码完全一致，只是调整一下 mask-size 即可。...: 400px; mask: linear-gradient(#000, #000 var(--per), transparent var(--per), transparent); mask-size...--per: 100%; } 70%, 100% { --per: 0%; } } 注意，上面的代码与第一段代码几乎完全一致，仅仅在于多加了 mask-size...transparent), linear-gradient(#000, #000 var(--per), transparent var(--per), transparent); mask-size
具体是哪些属性的缩写呢，可以参见下面的列表： mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size...webkit-mask-position: 0px 0px; -webkit-mask-repeat: repeat-x; mask: url('mask.png'); mask-size
/test.png) no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; } CSS3 mask默认是基于透明度实现遮罩效果的
引入 html css .item{ mask: url("/test.svg") no-repeat center center; mask-size
currentColor; overflow: hidden; } .svg-external-icon { background-color: currentColor; //遮罩 mask-size
6px) repeat-x 0 100%, linear-gradient(to bottom, #000 6px, transparent 6px) repeat-y 100% 0; mask-size
--m-0))), linear-gradient(90deg, rgba(0, 0, 0, var(--m-1)), rgba(0, 0, 0, var(--m-1))); mask-size...--m-2))), linear-gradient(90deg, rgba(0, 0, 0, var(--m-3)), rgba(0, 0, 0, var(--m-3))); mask-size...width: $width; height: $width; background: url(image.jpg); mask: bgSet($count); mask-size
/img/nature-sprite.png); -webkit-mask-size: 2300% 100%; mask-size: 2300% 100%; -webkit-animation: mask-play.../img/nature-sprite-2.png); -webkit-mask-size: 7100% 100%; mask-size: 7100% 100%; -webkit-animation: mask-play
currentColor; overflow: hidden; } .svg-external-icon { background-color: currentColor; mask-size...currentColor; overflow: hidden; } .svg-external-icon { background-color: currentColor; mask-size
20170701221732018"); -webkit-mask-image:url("https://img-blog.csdn.net/20170701221732018"); mask-size
fill: currentColor; overflow: hidden; } .svg-external-icon { background-color: currentColor; mask-size
55%, transparent), linear-gradient(#000, #000); mask-position: 0 0, 130px 0, 0 250px; mask-size...55%, transparent), linear-gradient(#000, #000); mask-position: 0 0, 130px 0, 0 250px; mask-size
用法是相仿的，mask 的值有这些 mask-clip mask-composite mask-image mask-mode mask-origin mask-position mask-repeat mask-size
bottom right, linear-gradient(45deg, transparent 15px, #fff 0) bottom left; mask-size...url(image1.jpg) no-repeat left top; } .img2 { mask: url(https://i.imgur.com/AYJuRke.png); mask-size
linear-gradient(270deg, transparent, transparent 30%, #000), linear-gradient(270deg, #000, #000); mask-size
0%, #000, transparent 30%); animation: scale 6s infinite; } @keyframes scale { 0% { mask-size...: 100% 100%; } 60%, 100% { mask-size: 150% 800%; } } ?
mask-repeat: no-repeat; mask-position: right bottom, left top, right top, left bottom; mask-size
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
