橘子洲头（学习黑师汉字逐渐显示效果）
本帖最后由 南无月 于 2023-5-17 20:46 编辑 <br /><br /><style>#papa {margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://s1.ax1x.com/2023/05/17/p9R7LJP.jpg');
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
css-doodle { position: absolute; }</style>
<div id="papa"><!-- 播放器 -->
<css-doodle grid="1x1" id="mplayer">:doodle {@size: 100px;cursor: pointer;left:150px;top: 50px; z-index: 4;clip-path: @shape(fill: evenodd;points: 600;scale: .13;x: 6 * cos(t) + cos(12t);y: 6 * sin(t) - sin(12t););background: url('https://pic2.imgdb.cn/item/6464c4ed0d2dde5777ca602a.gif') no-repeat center / cover; pointer-events: auto; animation: rot 6s infinite linear var(--state); } @keyframes rot { to { transform: rotate(360deg); } }</css-doodle><!-- 文本 --><css-doodle grid="6x7" click-to-update="">:doodle {@size: 240px 300px;left: 120px;top: 200px;cursor: pointer;z-index: 3;}@size: 50px;@place: calc(@col * 40px - 20px) calc(@row * 40px - 20px);font: normal 30px / 40px sans-serif;color:yellow;text-shadow: 1px 1px 2px #000;opacity: 0;:before {content: @pn([独立寒秋， 湘江北去， 橘子洲头。 看万山红遍，层林尽染；漫江碧透，百舸争流……]);}animation: show .3s calc((@i - 1) * .3s) linear forwards var(--state);@keyframes show { to { opacity: 1; } }</css-doodle><!-- 粒子 --><css-doodle grid="40x1">:doodle { @size: 1024px 640px; perspective: 300px; }:container { transform-style: preserve-3d; }background: @m(@r(140, 100), radial-gradient(@p(#00b8a9, #f8f3d4, #f6416c, #ffde7d) 15%, transparent 50%) @r(100%) @r(100%) / @r(1%, 3%) @lr no-repeat);@size: 30%;@place-cell: center;border-radius: 50%;animation: scale-up 15s calc(@i * -.6s) linear infinite var(--state);@keyframes scale-up {0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); }10% { opacity: 1; }95% { transform: translate3d(0, 0, @r(50vmin, 55vmin)) rotate(@r(-360deg, 360deg)); }100% { opacity: 0; transform: translate3d(0, 0, 1vmin); }}</css-doodle>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1307601266" autoplay="autoplay" loop="loop"></audio>
<script>(function() {
let script = document.createElement('script');
script.src = 'https://unpkg.com/css-doodle@0.34.8/css-doodle.min.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> @马黑黑 知道问题在JS部分的最后一句，还有播放器Z值的问题，{:4_173:} 毛主席来了，说话要算数{:4_170:} 这个做得漂亮。文字和粒子都出来了，还有漂亮的播放器按钮。月儿真棒{:4_187:} 这个文字使用单一色的好，粒子还是多钟颜色。文字点击可以重新加载，点击暂停可以让所有内推停止{:4_187:} 红影 发表于 2023-5-17 20:51
这个做得漂亮。文字和粒子都出来了，还有漂亮的播放器按钮。月儿真棒
{:4_187:}影子晚上好，好不容易整出来 醉美水芙蓉 发表于 2023-5-17 20:54
月儿学得快！做得漂亮！
{:4_170:}水芙蓉晚上好，试着练习一下写得作业 红影 发表于 2023-5-17 20:58
这个文字使用单一色的好，粒子还是多钟颜色。文字点击可以重新加载，点击暂停可以让所有内推停止
{:4_173:}差点没整出来，请教了老师 女冠军来了{:4_431:}{:4_431:}{:4_431:} 南无月 发表于 2023-5-17 21:01
影子晚上好，好不容易整出来
那个空格占位好，让长长短短的词句用了所有个格子。{:4_187:} 超级学霸！满满的正量！红公主{:4_187:} 南无月 发表于 2023-5-17 21:02
差点没整出来，请教了老师
很不错的，做的很棒{:4_187:} 南无月 发表于 2023-5-17 20:48
@马黑黑 知道问题在JS部分的最后一句，还有播放器Z值的问题，
第一，废码要去掉；第二，布局讲究尺寸，不是所有的 css-doodle 都弄成和帖子一样大小；第三，由于粒子的css-doodle是全屏的，层级关系要调整，或可以按顺序排列：粒子在前面，按钮、文本在后面，总之，各层之间有重合的，需要适当提升埋在下层的（除非不需要）。 好制作，欣赏点赞！{:4_171:} 樵歌 发表于 2023-5-17 21:46
女冠军来了
感谢鼓励 红影 发表于 2023-5-17 21:51
那个空格占位好，让长长短短的词句用了所有个格子。
我取了个巧，只多一个字用空格可以解决。更多的空格处理没有研究 樵歌 发表于 2023-5-17 21:51
超级学霸！满满的正量！红公主
经典红歌，能量满满 红影 发表于 2023-5-17 21:51
很不错的，做的很棒
练习一下巩固知识点，哈哈 马黑黑 发表于 2023-5-17 22:05
第一，废码要去掉；第二，布局讲究尺寸，不是所有的 css-doodle 都弄成和帖子一样大小；第三，由于粒子的 ...
好的，播放按钮也试过清理废码，还是不成。看了老师的对比一下知道了，果然一团乱麻。