具体是哪些属性的缩写呢,可以参见下面的列表: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size...: -155px 0px } 75% { -webkit-mask-position: 155px 0px; mask-position...: 155px 0px } 100% { -webkit-mask-position: 155px 0px; mask-position...: -155px 0px } 75% { -webkit-mask-position: 155px 0px; mask-position...: 155px 0px } 100% { -webkit-mask-position: 155px 0px; mask-position
steps(70) forwards;} 最后,我们定义动画关键帧: @-webkit-keyframes mask-play { from { -webkit-mask-position: 0% 0; mask-position...: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }@keyframes mask-play { from {...-webkit-mask-position: 0% 0; mask-position: 0% 0; } to { -webkit-mask-position: 100% 0; mask-position
linear-gradient(90deg, rgba(0, 0, 0, var(--m-1)), rgba(0, 0, 0, var(--m-1))); mask-size: 50% 100%; mask-position...0, var(--m-3)), rgba(0, 0, 0, var(--m-3))); mask-size: 50% 50%; mask-repeat: no-repeat; mask-position...url(image.jpg); mask: bgSet($count); mask-size: $per $per; mask-repeat: no-repeat; mask-position...--m-0 到 --m-400 @function bgSet($n) {} 是生成 400 块 mask 片段 @function positionSet($n) 是生成 400 块 mask 的 mask-position
linear-gradient(-75deg, #715633, #2b2522); mask: url(WeGame-LOGO图.png); mask-repeat: no-repeat; mask-position...r.c4663/wegame-home/sc01-logo.52fe03c4.svg), linear-gradient(#fff, #fff); mask-repeat: no-repeat; mask-position...r.c4663/wegame-home/sc01-logo.52fe03c4.svg), linear-gradient(#fff, #fff); mask-repeat: no-repeat; mask-position...#2b2522); mask: url(//WeGame-Logo.png), linear-gradient(#fff, #fff); mask-repeat: no-repeat; mask-position
我们利用 mask 制作一个 radial-gradient ,使得人物附近为 transparent,并且根据人物运动的 animation,给 mask 的 mask-position 也添加上相同的...80px, #fff 100%); animation: mask 10s infinite alternate; } @keyframes mask { 100% { mask-position
linear-gradient(270deg, #000, #000); mask-size: 100% 46px, 100% calc(100% - 46px); mask-position...并且利用了 mask-position 定位,以及 calc 的计算,无论文本都多少行,都是适用的!需要说明的是,这里的 46px 的意思是单行文本的行高加上 padding-bottom 的距离。
mask 和 background 用法是相仿的,mask 的值有这些 mask-clip mask-composite mask-image mask-mode mask-origin mask-position
linear-gradient(-117deg, #000 55%, transparent 55%, transparent), linear-gradient(#000, #000); mask-position...linear-gradient(-117deg, #000 55%, transparent 55%, transparent), linear-gradient(#000, #000); mask-position
before { background: url(image2.jpg) no-repeat left top; } @keyframes maskMove { from { mask-position...: 0 0; } to { mask-position: 100% 0; } } CodePen Demo -- mask 制作转场动画 当然,这个也是可以加上各种动画的
注意红框框出来的部分,我们可以看到我们由于给.el元素指定了背景白色、遮罩为svg、导致我们的内容只在这个白色的svg中显示 其他的属性、如 mask-repeat指定为no-repeat就能让其不重复显示 mask-position
SVG 的 CSS 遮罩进行了改进,这是对 Chrome 120 中改进的 CSS 遮罩支持的后续更新,为 SVG 添加了新的遮罩支持(多个遮罩,以及 mask-mode,mask-composite,mask-position
, transparent 12px, #2179f5 13px ); mask-repeat: no-repeat; mask-position
2000/svg'> 然后,把两段 svg 直接用作遮罩背景就行了,可以用 mask-size 和 mask-position
它支持在样式中设置以下几种属性: mask-image mask-mode mask-repeat mask-position mask-clip mask-origin mask-size mask-type
"mask-repeat", "mask-repeat-x", "mask-repeat-y", "mask-position
领取专属 10元无门槛券
手把手带您无忧上云