论坛 › 欢乐水吧 › 《外星入侵》（学习黑黑Trespass帖子效果）

红影 发表于 2023-6-4 09:48

《外星入侵》（学习黑黑Trespass帖子效果）

<style>
#papa {
      margin: 80px 0 0 calc(50% - 593px);
      width: 1024px;
      height: 640px;
      background: lightblue url('https://pic.imgdb.cn/item/647bddc1f024cca173ebadb9.jpg') no-repeat center /

cover;
      box-shadow: 3px 3px 20px #000;
      position: relative;
      z-index: 1;
      --state: paused;
}
#pic {
        position: absolute;
        left: 460px;
        top: 30px;
        width: 194px;
        height: 70px;
}
css-doodle {
      position: relative;
      left: 460px;
      top: 190px;
      animation: rot 6s infinite linear var(--state);
}
#pic1 {
        position: absolute; left: 120px;top: 200px;
}
@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div id="papa">
<img id="pic" src="https://pic.imgdb.cn/item/6238153e27f86abb2a9a9323.gif" alt="" />
<img src="https://pic.imgdb.cn/item/647be88af024cca173f77d22.gif" alt="" id="pic1" />
      <css-doodle grid="3" id="mplayer">
                :doodle {
                        @size: 360px 360px;
                        background: radial-gradient(DarkOrange,transparent 70%,transparent 0);
                        cursor: pointer;
                }
                clip-path: @shape(points: 360;
        m: 5;
        n: .3;
        p1: abs.cos(t * m/4) ^ n;
        p2: abs.sin(t * m/4) ^ n;
        r:1 / (p1 + p2) ^ (1 / n);
      );
                @place: center;
                background: PeachPuff;
                transform: rotate(calc(@i * 40deg)) translate(100px);
      </css-doodle>
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1893616961" autoplay="autoplay"

loop="loop"></audio>
</div>

<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 = () => 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>

红影 发表于 2023-6-4 09:49

单曲音乐《外星入侵》，单向心思：快点逃吧{:4_196:}

红影 发表于 2023-6-4 09:53

感谢黑黑的代码。本来想把那个旋转圆形弄成椭圆，在@size里设置了宽高，发现会损失图形形状，换了好几个图形，都不行，索性就圆吧。是不是在@size里设置是不对的？@马黑黑{:4_204:}

小文 发表于 2023-6-4 10:15

好酷幻，好喜欢！敬酒！{:4_191:}{:4_204:}{:4_187:}

梦油 发表于 2023-6-4 10:57

美轮美奂的一幅科幻作品。{:4_199:}

醉美水芙蓉 发表于 2023-6-4 11:42

樵歌 发表于 2023-6-4 13:00

俺来念动六字真言：唵 嘛 泥 叭 咪 吽，渡一切苦厄。。。。。

樵歌 发表于 2023-6-4 13:00

也太吓人了，师兄来度人生。。。。。。

梦缘 发表于 2023-6-4 16:12

很形像，欣赏老师的精彩，问好！{:4_204:}

红影 发表于 2023-6-4 20:52

小文 发表于 2023-6-4 10:15
好酷幻，好喜欢！敬酒！

谢谢小文鼓励{:4_204:}

红影 发表于 2023-6-4 20:52

梦油 发表于 2023-6-4 10:57
美轮美奂的一幅科幻作品。

就图好玩的，主要学习一下黑黑的代码{:4_173:}

红影 发表于 2023-6-4 20:53

醉美水芙蓉 发表于 2023-6-4 11:42
红影美女厉害！

多谢水芙蓉鼓励{:4_187:}

红影 发表于 2023-6-4 20:53

樵歌 发表于 2023-6-4 13:00
俺来念动六字真言：唵 嘛 泥 叭 咪 吽，渡一切苦厄。。。。。

哈哈，师兄真是要拯救地球么{:4_173:}

红影 发表于 2023-6-4 20:54

樵歌 发表于 2023-6-4 13:00
也太吓人了，师兄来度人生。。。。。。

这样全世界的人都要感谢师兄了{:4_173:}

红影 发表于 2023-6-4 20:54

梦缘 发表于 2023-6-4 16:12
很形像，欣赏老师的精彩，问好！

谢谢梦缘，有你的鼓励我一点更加好好做帖{:4_187:}

梦油 发表于 2023-6-4 20:57

红影 发表于 2023-6-4 20:52
就图好玩的，主要学习一下黑黑的代码

活学活用啊。

小文 发表于 2023-6-4 21:05

越看越喜欣赏，真的逼真，像天际外星。太好了，厉害！{:4_187:}{:4_190:}

南无月 发表于 2023-6-4 21:46

影子的音乐听起来都痛快之极~~
小播换成了星星形状，玄幻，神秘~~
整个贴子十分大气阔朗，十分喜欢{:4_187:}

红影 发表于 2023-6-4 23:08

梦油 发表于 2023-6-4 20:57
活学活用啊。

也是套用的代码呢。

马黑黑 发表于 2023-6-4 23:08

红影 发表于 2023-6-4 09:53
感谢黑黑的代码。本来想把那个旋转圆形弄成椭圆，在@size里设置了宽高，发现会损失图形形状，换了好几个图 ...

多个图案以 rotate 与 translate 配套要弄成椭圆的，需要更改多个图案的 translate 数值（半径），简单公式做不了，你可以考虑做一个 offset-path 的

查看完整版本: 《外星入侵》（学习黑黑Trespass帖子效果）