这个是不是要飞起来的节奏
本帖最后由 马黑黑 于 2025-8-14 22:24 编辑 <br /><br /><div class="codebox" data-prev="1"><style>
.ma {
margin: 20px auto;
width: 600px;
height: 600px;
background: url('https://638183.freep.cn/638183/Pic/38/st6.jpg') no-repeat 0/cover;
overflow: hidden;
position: relative;
}
.ma::before {
position: absolute;
content: '';
inset: 0;
background: inherit;
mask: url('https://638183.freep.cn/638183/web/svg/p1.svg') no-repeat center/50% 50%;
-webkit-mask: url('https://638183.freep.cn/638183/web/svg/p1.svg') no-repeat center/50% 50%;
animation: rot 3s linear infinite;
}
@keyframes rot {
to { transform: rotate(360deg); }
}
</style>
<div class="ma"></div>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 预览看到效果后，能不能解释一下实现原理？ 给个提示：如果将 animation: rot 3s linear infinite; 这一句删掉，则“螺旋桨”是看不到的 马黑黑 发表于 2025-8-14 20:38
给个提示：如果将 animation: rot 3s linear infinite; 这一句删掉，则“螺旋桨”是看不到的
因为它跟原图重合了，所以看不到。而转动起来，因每根螺旋桨叶切出的是不一样的，所以能看出它来。 真会玩，给美女屁股后面安个螺旋桨啊{:4_173:} 红影 发表于 2025-8-14 21:00
因为它跟原图重合了，所以看不到。而转动起来，因每根螺旋桨叶切出的是不一样的，所以能看出它来。
正确 红影 发表于 2025-8-14 21:01
真会玩，给美女屁股后面安个螺旋桨啊
{:4_196:} 伪元素背景用了大背景底图，加了一个SVG图片遮罩，大小是背景600的一半，没动就看不到{:4_173:} -webkit=mask这里跟以前用的好象不一样，中间是一小杠吧 马黑黑 发表于 2025-8-14 21:19
正确
谢{:4_171:} 马黑黑 发表于 2025-8-14 21:19
美女要是真飞丢了，要找你算账了{:4_172:} 花飞飞 发表于 2025-8-14 22:00
-webkit=mask这里跟以前用的好象不一样，中间是一小杠吧
反正我的浏览器不需要前缀，所以写错的话也不影响效果。 欣赏！点赞！SVG和JS我都学不会。 寒冬残荷 发表于 2025-8-14 22:29
欣赏！点赞！SVG和JS我都学不会。
svg和HTML是老表关系 寒冬残荷 发表于 2025-8-14 22:23
反正我的浏览器不需要前缀，所以写错的话也不影响效果。
chrome 120以上都没问题 红影 发表于 2025-8-14 22:16
美女要是真飞丢了，要找你算账了
这不是要漂洋过海来看你吗{:4_170:} 花飞飞 发表于 2025-8-14 22:00
-webkit=mask这里跟以前用的好象不一样，中间是一小杠吧
盲打打错了，这两个符号位置连在一起。俺小手指长 花飞飞 发表于 2025-8-14 22:00
伪元素背景用了大背景底图，加了一个SVG图片遮罩，大小是背景600的一半，没动就看不到
mask 和 position 一样，都可以使用简写方式写出位置和尺寸 预览的美女背影装了螺旋桨，一发动真的要飞起来了！ 马黑黑 发表于 2025-8-14 22:57
盲打打错了，这两个符号位置连在一起。俺小手指长
就是天生聪明，偶为了小手指长还特意留了指甲充数{:4_173:}