论坛 › 欢乐水吧 › Trespass

马黑黑 发表于 2023-6-3 06:44

Trespass

<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: lightblue url('https://638183.freep.cn/638183/t23/webp1/trespass.webp') no-repeat center / cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
css-doodle {
        position: relative;
        left: 270px;
        top: 250px;
        animation: rot 6s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <css-doodle grid="3" id="mplayer">
                :doodle {
                        @size: 160px;
                        background: radial-gradient(darkgreen,transparent 70%,transparent 0);
                        cursor: pointer;
                }
                @shape: clover 3;
                @place: center;
                background: green;
                transform: rotate(calc(@i * 40deg)) translate(60px);
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2005021482" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

马黑黑 发表于 2023-6-3 06:45

帖子代码
<style>
#papa {
        margin: 0 0 0 calc(50% - 593px);
        width: 1024px;
        height: 640px;
        background: lightblue url('https://638183.freep.cn/638183/t23/webp1/trespass.webp') no-repeat center / cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        z-index: 1;
        --state: paused;
}
css-doodle {
        position: relative;
        left: 270px;
        top: 250px;
        animation: rot 6s infinite linear var(--state);
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
        <css-doodle grid="3" id="mplayer">
                :doodle {
                        @size: 160px;
                        background: radial-gradient(darkgreen,transparent 70%,transparent 0);
                        cursor: pointer;
                }
                @shape: clover 3;
                @place: center;
                background: green;
                transform: rotate(calc(@i * 40deg)) translate(60px);
        </css-doodle>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2005021482" autoplay="autoplay" loop="loop"></audio>
</div>

<script>
(function() {
        let script = document.createElement('script');
        script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
        document.head.appendChild(script);
        let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
        aud.addEventListener('play', mState, false);
        aud.addEventListener('pause', mState, false);
        mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script>

樵歌 发表于 2023-6-3 06:55

强盗来鸟的赶脚。怪吓人的{:4_189:}

樵歌 发表于 2023-6-3 06:55

看来酒喝爽了{:4_189:}

醉美水芙蓉 发表于 2023-6-3 07:06

马黑黑 发表于 2023-6-3 07:13

樵歌 发表于 2023-6-3 06:55
强盗来鸟的赶脚。怪吓人的

你瞧得出来主题

马黑黑 发表于 2023-6-3 07:13

樵歌 发表于 2023-6-3 06:55
看来酒喝爽了

爽歪歪滴{:4_170:}

马黑黑 发表于 2023-6-3 07:14

醉美水芙蓉 发表于 2023-6-3 07:06
汽车方向盘的感觉，不错喔！谢谢黑黑老师分享！

早

南无月 发表于 2023-6-3 09:00

简单素雅，色调明快{:4_199:}

红影 发表于 2023-6-3 09:43

能把9个接成这样的形状，很开拓人的想象啊。原来不一定用单个的图案，还能用图案组图形呢{:4_199:}

红影 发表于 2023-6-3 09:52

transform: rotate(calc(@i * 40deg)) translate(60px);
40乘以9正好360度，这个挺好理解，后面的60px稍许有点费解：@size: 160px组成的3*3的格子，每个格子的宽高是53多点，我理解三叶草也是这样的大小吧，用这个数字组成的圆反算出来的半径比60大，要70多了。
可能三叶草的长宽不能用满格来计算吧。

红影 发表于 2023-6-3 09:54

用单个图案组图形，这个思路太赞了。制作的背景和音乐形成的氛围也非常赞{:4_199:}

马黑黑 发表于 2023-6-3 12:20

红影 发表于 2023-6-3 09:54
用单个图案组图形，这个思路太赞了。制作的背景和音乐形成的氛围也非常赞

感谢支持与鼓励

马黑黑 发表于 2023-6-3 12:21

南无月 发表于 2023-6-3 09:00
简单素雅，色调明快

感谢认可

马黑黑 发表于 2023-6-3 12:22

红影 发表于 2023-6-3 09:43
能把9个接成这样的形状，很开拓人的想象啊。原来不一定用单个的图案，还能用图案组图形呢

多发挥想象力，会找到很多不同的实现方法

马黑黑 发表于 2023-6-3 12:23

红影 发表于 2023-6-3 09:52
transform: rotate(calc(@i * 40deg)) translate(60px);
40乘以9正好360度，这个挺好理解，后面的60px稍许 ...
translate() 里的数字，实际上就是三叶草绕圈的半径，可大可小，不一定按父元素的尺寸做精准计算，一切根据需要来

红影 发表于 2023-6-3 16:36

马黑黑 发表于 2023-6-3 12:20
感谢支持与鼓励

黑黑的设计总是那么出彩{:4_199:}

红影 发表于 2023-6-3 16:37

马黑黑 发表于 2023-6-3 12:22
多发挥想象力，会找到很多不同的实现方法

这说法太赞了{:4_199:}

红影 发表于 2023-6-3 16:39

马黑黑 发表于 2023-6-3 12:23
translate() 里的数字，实际上就是三叶草绕圈的半径，可大可小，不一定按父元素的尺寸做精准计算，一切根 ...

嗯，也可以计算个数值，然后在这附近调整，一切以想要的效果为准{:4_199:}

马黑黑 发表于 2023-6-3 17:05

红影 发表于 2023-6-3 16:39
嗯，也可以计算个数值，然后在这附近调整，一切以想要的效果为准

我这里是收缩半径。

当我们想让绕圈圈对象的中心点与圆周重合，才需要精确计算。

查看完整版本: Trespass