母亲
<css-doodle id="mplayer">:doodle {
@grid: 4 / 993px 662px;
background: gray url('https://638183.freep.cn/638183/t23/1/mama.jpg');
position: relative;
margin: 0 0 0 calc(50% - 577.5px);
z-index: 1;
--state: paused;
}
@size: @r(40,100)px;
@place: @r(5,90)% @r(5,20)%;
background: rgba(@m3(@r(255)), @r(.6,.9));
clip-path: @shape(
points: 360;
r: abs.sin.tan(sin(1.5t)*1.14);
);
@nth(@size) {
@size: 160px;
@place: center;
cursor: pointer;
}
animation: rot @r(3,6)s infinite linear var(--state);
@keyframes rot {to {transform: rotate(@p(-360,360)deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=560463082" autoplay loop></audio>
<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 = () => mplayer.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>
帖子完整代码
<css-doodle id="mplayer">
:doodle {
@grid: 4 / 993px 662px;
background: gray url('https://638183.freep.cn/638183/t23/1/mama.jpg');
position: relative;
margin: 0 0 0 calc(50% - 577.5px);
z-index: 1;
--state: paused;
}
@size: @r(40,100)px;
@place: @r(5,90)% @r(5,20)%;
background: rgba(@m3(@r(255)), @r(.6,.9));
clip-path: @shape(
points: 360;
r: abs.sin.tan(sin(1.5t)*1.14);
);
@nth(@size) {
@size: 160px;
@place: center;
cursor: pointer;
}
animation: rot @r(3,6)s infinite linear var(--state);
@keyframes rot {to {transform: rotate(@p(-360,360)deg); } }
</css-doodle>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=560463082" autoplay loop></audio>
<script>
(function() {
let script = document.createElement('script');
script.src = '/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => mplayer.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>
使用心形花瓣，表达特别的心意 欣赏，学习。 借黑黑先生美帖，祝天下妈妈们节日快乐！ 还以为上面的心形花瓣是变色的，原来作为播放器按钮的那个花瓣刷新后也变色的呢{:4_187:} 母亲在心间 r: abs.sin.tan(sin(1.5t)*1.14);
这个计算看着好复杂啊{:4_173:} 黑黑用新的代码做的祝贺帖，真好。可以借帖祝贺母亲节，也可以学习新代码了{:4_187:} 红影 发表于 2023-5-14 10:07
黑黑用新的代码做的祝贺帖，真好。可以借帖祝贺母亲节，也可以学习新代码了
这个其实很简单了。难点仅在于剪裁路径 clip-path ，使用 @shape 函数（这里不是属性）做出三个心形花瓣，这个数学原理不一定要去弄懂，记录下来就好。 起个网名好难 发表于 2023-5-14 09:32
欣赏，学习。
上午好 红影 发表于 2023-5-14 10:06
r: abs.sin.tan(sin(1.5t)*1.14);
这个计算看着好复杂啊
记录下来就好，有空闲了试试修改一下数字 小文 发表于 2023-5-14 10:03
母亲在心间
感谢支持 梦油 发表于 2023-5-14 10:00
借黑黑先生美帖，祝天下妈妈们节日快乐！
感谢支持，上午好 红影 发表于 2023-5-14 10:03
还以为上面的心形花瓣是变色的，原来作为播放器按钮的那个花瓣刷新后也变色的呢
每一个，每次打开，颜色都不一样 又是新创意！ 樵歌 发表于 2023-5-14 10:34
又是新创意！
上午好，节日好 伟大的节日，极美的贴子，细腻的情感{:4_187:} 南无月 发表于 2023-5-14 10:51
伟大的节日，极美的贴子，细腻的情感
{:4_180:} 上来瞄一眼{:4_173:}