马黑黑 发表于 2024-8-12 07:48

Drift

<style>
#mydiv {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 576px;
        background: tan;
        box-shadow: 3px 3px 8px gray;
        overflow: hidden;
        position: relative;
}
#mydiv::before {
        position:absolute;
        content: '';
        inset: 0;
        background: url('https://638183.freep.cn/638183/t24/4/drift.jpg') no-repeat center/cover;
        -webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat center/var(--size) var(--size);
        transition: .72s;
        --size: 3px;
}
#mydiv:hover::before { --size: 32px; transform: scale(115%) rotate(2deg); }
#player {
        --inset: gray;
        position: absolute;
        left: calc(50% - 60px);
        top: 40px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat center/cover;
        mix-blend-mode: multiply;
        box-shadow: inset 0 0 30px var(--inset);
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
#player:hover { --inset: plum; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1929364487" autoplay loop></audio>
        <div id="player" title="播放/暂停"></div>
</div>

<script>
aud.oncanplay = aud.onplaying = aud.onpause = () => player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-8-12 07:49

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#mydiv {
        margin: 30px 0 30px calc(50% - 593px);
        width: 1024px;
        height: 576px;
        background: tan;
        box-shadow: 3px 3px 8px gray;
        overflow: hidden;
        position: relative;
}
#mydiv::before {
        position:absolute;
        content: '';
        inset: 0;
        background: url('https://638183.freep.cn/638183/t24/4/drift.jpg') no-repeat center/cover;
        -webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat center/var(--size) var(--size);
        transition: .72s;
        --size: 3px;
}
#mydiv:hover::before { --size: 32px; transform: scale(115%) rotate(2deg); }
#player {
        --inset: gray;
        position: absolute;
        left: calc(50% - 60px);
        top: 40px;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: url('https://638183.freep.cn/638183/small/rose.jpg') no-repeat center/cover;
        mix-blend-mode: multiply;
        box-shadow: inset 0 0 30px var(--inset);
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
#player:hover { --inset: plum; }
@keyframes rot { to { transform: rotate(360deg); } }
&lt;/style&gt;

&lt;div id="mydiv"&gt;
        &lt;audio id="aud" src="https://music.163.com/song/media/outer/url?id=1929364487" autoplay loop&gt;&lt;/audio&gt;
        &lt;div id="player" title="播放/暂停"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
aud.oncanplay = aud.onplaying = aud.onpause = () =&gt; player.style.setProperty('--state', aud.paused ? 'paused' : 'running');
player.onclick = () =&gt; aud.paused ? aud.play() : aud.pause();
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

竹溪 发表于 2024-8-12 09:10

人会变大变小，那些点点也变了{:4_204:}

竹溪 发表于 2024-8-12 09:11

欣赏老师好帖{:4_187:}

梦江南 发表于 2024-8-12 09:31

代码真神奇，黑黑老师真厉害！佩服！{:4_187:}

梦江南 发表于 2024-8-12 09:58

粒子变网格

红影 发表于 2024-8-12 19:54

用遮罩做小点点，而且鼠标滑过，让遮罩尺寸和图片都都发生变化，这制作真神奇{:4_199:}

红影 发表于 2024-8-12 19:55

遮罩其实是挖了小孔，所以父元素设置了background: tan; 就会让小点点呈现这样的颜色呢。

红影 发表于 2024-8-12 19:56

去试验了一下，貌似-webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat center/var(--size) var(--size);里面，没有repeat 也可以的？

红影 发表于 2024-8-12 19:57

小播的设计也很漂亮，也有鼠标滑过后的效果变化。
这个制作真漂亮{:4_199:}

红影 发表于 2024-8-12 19:59

赶紧又跑回去看了“mask开孔实例”那个帖子，原来具体运用效果这么好的{:4_199:}

马黑黑 发表于 2024-8-12 20:40

红影 发表于 2024-8-12 19:56
去试验了一下，貌似-webkit-mask: radial-gradient(circle at center, transparent 0.2px, red 1px) repeat ...

repeat是默认的，意思是，缺省时是repeat

小辣椒 发表于 2024-8-12 22:40

刚看见梦江南的作业就是这个效果了，黑黑现在讲的知识点我基本都不会，一下子做不好帖了

红影 发表于 2024-8-12 22:50

马黑黑 发表于 2024-8-12 20:40
repeat是默认的，意思是，缺省时是repeat

原来是这样啊，谢谢黑黑{:4_187:}

马黑黑 发表于 2024-8-13 07:49

小辣椒 发表于 2024-8-12 22:40
刚看见梦江南的作业就是这个效果了，黑黑现在讲的知识点我基本都不会，一下子做不好帖了

这个帖子简单，全靠CSS做效果

小辣椒 发表于 2024-8-13 21:02

马黑黑 发表于 2024-8-13 07:49
这个帖子简单，全靠CSS做效果

直接套用代码玩玩吧

马黑黑 发表于 2024-8-13 21:26

小辣椒 发表于 2024-8-13 21:02
直接套用代码玩玩吧

你的帖子都很精彩，你要是懂的多一些，那会更上一层楼
页: [1]
查看完整版本: Drift