方圆之道（学习黑师《Harmonia》圆形播放效果）
本帖最后由 南无月 于 2023-6-17 07:50 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/05/23/p9TfSAJ.md.jpg') no-repeat center/cover;;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
#vid {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 2%;
opacity: .76;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
}
css-doodle { position: absolute; }</style><div id="papa"><css-doodle grid="2x1" id="mplayer">:doodle {@size: 1024px 640px;background: url('https://s1.ax1x.com/2023/05/23/p9TfSAJ.md.jpg')no-repeat center/cover;;box-shadow: 0 0 6px #000;margin: 20px auto;--state: paused;}@size: @r(60,190)px;position: absolute;background:url('https://pic1.imgdb.cn/item/646e138f0d2dde57775294bf.gif') no-repeat center;clip-path: @shape(points: 300;turn: 16;frame: 10;scale: .5;r: seq(.65, 10, .85););border-radius: 50%;cursor: pointer;offset-path: path('M500 400 Q750 200 850 200');offset-distance: calc((@i - 1) * 100%);animation: rot 8s infinite linear var(--state);@keyframes rot { to { transform: rotate(360deg); } }</css-doodle><css-doodle grid="4x1" click-to-update="">:doodle { @size: 650px 600px; top:100px;}@size: 120px;:after { content: @pn([方圆之道]); }font-family:'黑体', sans-serif;font-size: 7rem;color: black; text-shadow: 0 8px 9px #696969, 0px -2px 1px #fff; font-weight: 100; letter-spacing: -2px; animation: fall 1s calc((@i - 1) * 2s) linear forwards;@keyframes fall {from { transform: translateY(0); }to { transform: translateY(360px); }}</css-doodle><video id="vid" src="https://img.tukuppt.com/video_show/7165162/00/17/65/5ecb8fa5f0765.mp4" autoplay="" loop="" muted=""></video><audio id="aud" src="https://music.163.com/song/media/outer/url?id=1831451475" autoplay="autoplay" loop="loop"></audio></div><script>(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.9/css-doodle.min.js';
document.head.appendChild(script);
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid.pause()) : (papa.style.setProperty('--state','running'), vid.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
})();</script> 很漂亮的帖，欣赏问好老师！{:4_187:} 各种效果的应用越来越得心应手了{:4_199:} 梦缘 发表于 2023-6-16 19:13
很漂亮的帖，欣赏问好老师！
感谢梦缘临贴支持{:4_187:} 设计精巧奇特。不愧学霸。{:4_204:} 马黑黑 发表于 2023-6-16 19:47
各种效果的应用越来越得心应手了
{:4_173:}小播花得点暂停也看不出来了。。。又嫌它花，又舍不得换掉。 樵歌 发表于 2023-6-16 20:10
设计精巧奇特。不愧学霸。
感谢樵管夸奖鼓励{:4_187:} 南无月 发表于 2023-6-16 20:11
小播花得点暂停也看不出来了。。。又嫌它花，又舍不得换掉。
有点纠结正常 这个小播很炫，歌曲也是特别梦幻，浑厚的男声{:4_178:} 欣赏月月的精彩制作{:4_199:} 月儿的方圆之道啊，做得真好，好创意，好制作，真不愧是学霸{:4_187:} 马黑黑 发表于 2023-6-16 20:37
有点纠结正常
纠结着也挺好的。看一次纠结一次，忙得很{:4_170:} 醉美水芙蓉 发表于 2023-6-16 21:08
欣赏月儿美贴！
感谢水芙蓉支持哦{:4_187:} 小辣椒 发表于 2023-6-16 21:11
这个小播很炫，歌曲也是特别梦幻，浑厚的男声
这首歌是啥我忘了，当时没做歌词{:4_173:}好象还挺好听 小辣椒 发表于 2023-6-16 21:11
欣赏月月的精彩制作
{:4_187:}谢谢小辣椒支持鼓励。。 南无月 发表于 2023-6-16 21:23
谢谢小辣椒支持鼓励。。
月月好制作，欣赏加学习{:4_171:} 千羽 发表于 2023-6-16 21:16
月儿的方圆之道啊，做得真好，好创意，好制作，真不愧是学霸
{:4_187:}当时找图看是方的，小播是园的，就乱取的名字。千羽晚上好 南无月 发表于 2023-6-16 21:23
这首歌是啥我忘了，当时没做歌词好象还挺好听
好听的{:4_189:} 南无月 发表于 2023-6-16 21:24
当时找图看是方的，小播是园的，就乱取的名字。千羽晚上好
嗯名好，图也好{:4_181:}