论坛 › 动画音画 › 飞天乐舞

马黑黑 发表于 2023-3-29 08:07

飞天乐舞

本帖最后由 马黑黑 于 2023-3-29 08:09 编辑 <br /><br /><style>
#papa { --state: running; --delay: 0s; margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: black url('https://638183.freep.cn/638183/t23/1/65.jpeg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#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: 400px; --delay: .5s; }
#mydiv { position: absolute; left: 50%; bottom: 100px; 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 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="mydiv"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=332655" 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>

马黑黑 发表于 2023-3-29 08:09

帖子代码
<style>
#papa { --state: running; --delay: 0s; margin: -80px 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: black url('https://638183.freep.cn/638183/t23/1/65.jpeg') center/cover no-repeat; box-shadow: 3px 3px 20px #000; position: relative; z-index: 1; }
#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: 400px; --delay: .5s; }
#mydiv { position: absolute; left: 50%; bottom: 100px; 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 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="mydiv"></div>
</div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=332655" 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>

红影 发表于 2023-3-29 09:24

哈哈，原来飞天是由这水吧飞行器提供的动力啊{:4_170:}

红影 发表于 2023-3-29 09:41

这个飞行器的配色真漂亮，和底图很协调。两颗星星也很漂亮。当然最喜欢的是飞天美女，裙裾飘飘，好美{:4_199:}

梦油 发表于 2023-3-29 11:27

画面真显现出了太空遨游的意境。

马黑黑 发表于 2023-3-29 11:57

梦油 发表于 2023-3-29 11:27
画面真显现出了太空遨游的意境。

还行

马黑黑 发表于 2023-3-29 11:58

红影 发表于 2023-3-29 09:24
哈哈，原来飞天是由这水吧飞行器提供的动力啊

一度电就到月球了，嫦娥姐姐得吃两碗过桥米线

马黑黑 发表于 2023-3-29 11:58

红影 发表于 2023-3-29 09:41
这个飞行器的配色真漂亮，和底图很协调。两颗星星也很漂亮。当然最喜欢的是飞天美女，裙裾飘飘，好美{:4_19 ...

要吃饱了才能飞到月球

梦油 发表于 2023-3-29 15:19

马黑黑 发表于 2023-3-29 11:57
还行

很好，真棒！

红影 发表于 2023-3-29 15:30

马黑黑 发表于 2023-3-29 11:58
一度电就到月球了，嫦娥姐姐得吃两碗过桥米线

那么省电啊，水吧飞行器真是价廉物美，能耐多多{:4_173:}

红影 发表于 2023-3-29 15:31

马黑黑 发表于 2023-3-29 11:58
要吃饱了才能飞到月球

嫦娥姐姐不是已经吃了两碗过桥米线了么，应该算吃饱了吧{:4_173:}

马黑黑 发表于 2023-3-29 17:07

红影 发表于 2023-3-29 15:31
嫦娥姐姐不是已经吃了两碗过桥米线了么，应该算吃饱了吧

中途还有补餐

马黑黑 发表于 2023-3-29 17:08

红影 发表于 2023-3-29 15:30
那么省电啊，水吧飞行器真是价廉物美，能耐多多

主要是设计合理，符合各种动力学原理，还能利用光场

马黑黑 发表于 2023-3-29 17:09

梦油 发表于 2023-3-29 15:19
很好，真棒！

谢谢

樵歌 发表于 2023-3-29 19:42

俺要定购时空飞船，价格好说{:4_173:}

马黑黑 发表于 2023-3-29 19:48

樵歌 发表于 2023-3-29 19:42
俺要定购时空飞船，价格好说

打九折

红影 发表于 2023-3-29 20:24

马黑黑 发表于 2023-3-29 17:07
中途还有补餐

天宫伙食差，这是跑人间找补来了{:4_170:}

红影 发表于 2023-3-29 20:25

马黑黑 发表于 2023-3-29 17:08
主要是设计合理，符合各种动力学原理，还能利用光场

还有能量循环被，只要启动了，剩下的就是消耗的能源被完美地回收利用了。

马黑黑 发表于 2023-3-29 20:38

红影 发表于 2023-3-29 20:25
还有能量循环被，只要启动了，剩下的就是消耗的能源被完美地回收利用了。

回收利用没多大必要，利用光场才是秘籍。光场，和空气一样，既是有阻力的，又是可以利用的

马黑黑 发表于 2023-3-29 20:39

红影 发表于 2023-3-29 20:24
天宫伙食差，这是跑人间找补来了

天宫是计划经济，木有办法

查看完整版本: 飞天乐舞