三文钱((学习黑师内切正方形&点星&何以歌落花效果)
<css-doodle grid="10" id="mplayer"> :doodle { @size: 1024px 640px; position: relative; background: url('https://s1.ax1x.com/2023/06/22/pCJlOiT.jpg') no-repeat center / cover; box-shadow: 0 0 8px #000; opacity: .95; z-index: 1; margin: 0 0 0 calc(50% - 593px); --state: paused; } @nth(1) { @size: 300px; border-radius: 50%;clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%, 66.67% 50%, 50% 66.67%, 33.33% 50%, 50% 33.33%, 66.67% 50%, 100% 50%, 100% 0%); @place: 26% 400px; background: url('https://pic.imgdb.cn/item/6493cf821ddac507cc639b0f.png') no-repeat center / cover; cursor: pointer; z-index: @size; opacity: .99; animation: rot 8s infinite linear var(--state); } @nth(2) {@size: 1024px 640px;background: @doodle(@grid: 10 / 100%;@place: @r(0,100)% -10%;:after {content: '@p(🌸,❀,🏵️,🌺,❄️,💮,🍃)';animation: rot 6s infinite linear;font-size: @r(15,30)px;}animation: fly @r(30,50)s @r(0,-30)s infinite ;@nth(4){ transform: translate(20px); }@keyframes rot { to { transform: rotate(360deg); } }@keyframes fly {from { transform: rotate(0deg) translateY(0); opacity: .9;}to { transform: rotate(@r(-30,30)deg) translateY(800px); opacity: 0; }});}@nth(3) { @size: 100px; border-radius: 50%;clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%, 66.67% 50%, 50% 66.67%, 33.33% 50%, 50% 33.33%, 66.67% 50%, 100% 50%, 100% 0%); @place: 16% 100px; background: url('https://pic.imgdb.cn/item/6493cf821ddac507cc639b0f.png') no-repeat center / cover; cursor: pointer; z-index: @size; animation: rot 6s infinite linear var(--state); }@nth(4) { @size: 160px; border-radius: 50%;clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%, 66.67% 50%, 50% 66.67%, 33.33% 50%, 50% 33.33%, 66.67% 50%, 100% 50%, 100% 0%); @place: 66% 380px; background: url('https://pic.imgdb.cn/item/6493cf821ddac507cc639b0f.png') no-repeat center / cover; cursor: pointer; z-index: @size; opacity: .95; animation: rot 18s infinite linear var(--state); } @match(i ≥ 5) { @size: @r(3,15)px; @shape: hypocycloid 4; @place: @r(60, 1242)px @r(0,200)px; background: #d73784; opacity: .8; transform: rotate(-30deg); animation: flash .5s @r(-1)s infinite alternate var(--state); } @keyframes rot { to { transform: rotate(360deg); } } @keyframes flash { to { transform: rotate(30deg); opacity: 0; } } </css-doodle><audio id="aud" src="https://music.163.com/song/media/outer/url?id=457512475" autoplay="autoplay" loop="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);
window.onload = () => {
let btn = mplayer.shadowRoot.querySelector('cell');
btn.onclick = () => aud.paused ? aud.play() : aud.pause();
}
})();</script>
@马黑黑 钱贴来了{:4_170:}
内切正方形数据:120,4,40挖出来的才跟铜钱比较相似 好制作,好速度。这个可以做粽子馅。 马黑黑 发表于 2023-6-22 17:58
好制作,好速度。这个可以做粽子馅。
挖的时候发现,这三个数据组合结果可以极灵活{:4_199:}十分好用 马黑黑 发表于 2023-6-22 17:58
好制作,好速度。这个可以做粽子馅。
吃得时候慢慢咬,当心硌牙{:4_173:} 南无月 发表于 2023-6-22 18:03
吃得时候慢慢咬,当心硌牙
想拔牙的可以不小心 南无月 发表于 2023-6-22 18:01
挖的时候发现,这三个数据组合结果可以极灵活十分好用
好用多用用 学霸同学,出货吗,我全要了!{:4_173:} 学霸同学,出货吗,我全要了!{:4_173:} 马黑黑 发表于 2023-6-22 18:05
想拔牙的可以不小心
这样拔牙到是省钱 马黑黑 发表于 2023-6-22 18:05
好用多用用
天天在用{:4_205:} 樵歌 发表于 2023-6-22 19:31
学霸同学,出货吗,我全要了!
贴子放论坛了随意取{:4_187:} 醉美水芙蓉 发表于 2023-6-22 18:42
月儿速度,做得不错!
谢谢水芙蓉鼓励{:4_187:} 月儿 厉害,三个黑黑的最新效果华丽丽地整到一个帖子里了,聪明{:4_199:} 都是古铜钱啊,三文钱可以买不少粽子呢,月儿这是过节发福利呢{:4_173:} 南无月 发表于 2023-6-22 21:05
天天在用
{:4_191:} 南无月 发表于 2023-6-22 21:04
这样拔牙到是省钱
没错 樵歌 发表于 2023-6-22 19:31
学霸同学,出货吗,我全要了!
重要的事情要说三遍{:4_170:} 南无月 发表于 2023-6-22 21:06
贴子放论坛了随意取
那好,俺 去拿了,不会后悔吧{:4_173:}