飞向星际（学习黑师《飞天乐舞》水吧飞行器效果）
<style>#papa { --state: running; --delay: 0s; margin: -80px 0 0 calc(50% - 593px);width: 1024px; height: 640px; background: black url('https://pic.imgdb.cn/item/64281276a682492fccb7e7cc.gif') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#mama { margin: auto; width: 300px; height:300px;}
.text{ font-size: 64px; font-weight: bold; fill: none; stroke-width: 2px; stroke-dasharray: 90 310; animation: stroke 6s infinite linear; }
.text-1{ stroke: #3498db; text-shadow: 0 0 5px #3498db; animation-delay: -1.5s; }
.text-2{ stroke: #f39c12; text-shadow: 0 0 5px #f39c12; animation-delay: -3s; }
.text-3{ stroke: #e74c3c; text-shadow: 0 0 5px #e74c3c; animation-delay: -4.5s; }
.text-4{ stroke: #9b59b6; text-shadow: 0 0 5px #9b59b6; animation-delay: -6s; }
#papa::before, #papa::after { position: absolute; content: url('https://638183.freep.cn/638183/t22/btn/star.png'); animation: flash 1s var(--delay) infinite alternate var(--state); }
#papa::after { left: 850px; --delay: .5s; }
#mydiv { position: absolute; left: 65%; bottom: 40px; width: 100px; height: 120px; border-style: solid; border-color: transparent transparent hsla(0, 0%,100%, .45) transparent; border-width: 20px 120px 120px 120px; border-radius: 50%; box-shadow: 20px 20px 30px snow inset, -20px -20px 30px snow inset; filter: drop-shadow(-500px -100px 0 silver); cursor: pointer; transform: rotate(15deg); animation: fly 4s infinite alternate var(--state); }
#mydiv::before, #mydiv::after { position: absolute; content: ''; border-radius: 100%; background: silver; top: -5px; animation: rot .5s infinite linear var(--state); }
#mydiv::before { width: 100px; height: 10px; }
#mydiv::after { width: 10px; height: 100px; left: calc(50% - 5px); top: -50px; }
@keyframes stroke { to { stroke-dashoffset: -400; } }
@keyframes fly { 10% { bottom: 120px; left: 50%; } 20% { bottom: 140px; left: 55%; } 50% { bottom: 100px; left: 50%; } }
@keyframes rot { from { transform: rotateX(60deg) rotateZ(0); } to { transform: rotateX(60deg) rotateZ(360deg); } }
@keyframes flash { from { opacity: 1; transform: rotate(-5deg); } to { opacity: 0; transform: rotate(5deg); } }</style>
<div id="papa">
<div id="mama">
<svg width="100%" height="100%" style="border: 0px solid">
<text text-anchor="middle" x="50%" y="50%" class="text text-1">飞向星际</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2">飞向星际</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3">飞向星际</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4">飞向星际</text>
</svg>
</div>
<div id="mydiv"></div></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1443178245" loop="" autoplay=""></audio><script>let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('play', mState,false);
aud.addEventListener('pause', mState,false);
mydiv.onclick = () => aud.paused ? aud.play() : aud.pause();</script> @马黑黑 老师瞧瞧这个加字成功了{:4_170:} 悄然这个真的是优秀作业的，这个扭动字加上去了，画面也是很灵动，效果超级好{:4_178:} 小辣椒 发表于 2023-4-1 21:57
悄然这个真的是优秀作业的，这个扭动字加上去了，画面也是很灵动，效果超级好
{:4_170:}我一直试图给贴子加字，这个总算成功了。
之前有个套《东吴》的霞光一直没发，就是字一直加不上 这么复杂的字都能加上，出师了 恭喜悄然出师了！！！{:4_187:}应该请黑黑老师喝出师酒！{:4_176:} 为你点赞，喝彩 恭喜学霸出师，怎么着也得办一桌谢师宴呗{:4_189:} 亦是金 发表于 2023-4-1 22:30
恭喜悄然出师了！！！应该请黑黑老师喝出师酒！
{:5_106:} 樵歌 发表于 2023-4-2 07:55
恭喜学霸出师，怎么着也得办一桌谢师宴呗
要得要得{:5_106:} 马黑黑 发表于 2023-4-1 22:16
这么复杂的字都能加上，出师了
不出{:4_170:} 亦是金 发表于 2023-4-1 22:30
恭喜悄然出师了！！！应该请黑黑老师喝出师酒！
请黑黑老师喝酒可以，水平出师还不行。{:4_170:} 庶民 发表于 2023-4-2 04:55
为你点赞，喝彩
感谢你的支持{:4_187:} 樵歌 发表于 2023-4-2 07:55
恭喜学霸出师，怎么着也得办一桌谢师宴呗
这么久还没好好谢过黑老师，得来一桌{:4_170:}出师就算了，水平还不行 马黑黑 发表于 2023-4-2 10:08
必须有酒。 马黑黑 发表于 2023-4-2 10:08
要得要得
还得有嘎嘎。{:4_170:}外加一碗传说中的螺蛳粉 雨中悄然 发表于 2023-4-2 12:22
还得有嘎嘎。外加一碗传说中的螺蛳粉
螺蛳粉里可以有嘎嘎，还有螺蛳，以及腐竹、时鲜蔬菜、酸笋和一些香菜。要吃辣的才够味。 雨中悄然 发表于 2023-4-2 12:20
必须有酒。
酒水是标配 雨中悄然 发表于 2023-4-2 12:18
不出
要出的，不然难以自立门户。 马黑黑 发表于 2023-4-2 12:45
要出的，不然难以自立门户。
还没满百天就自立门户，没底气
页:
[1]
2