加林森 发表于 2022-4-6 21:32

《苍穹之下》 -- 摩登兄弟刘宇宁

本帖最后由 加林森 于 2022-4-6 21:58 编辑 <br /><br /><style>
.stage {
      position: relative;
      left: -302px;
      width: 1200px;
      height: 600px;
      background: #000 url('https://pic.imgdb.cn/item/624d8fc2239250f7c51e9212.jpg') no-repeat center/cover;
      overflow: hidden;
      filter: blur(1px);
      cursor: pointer;
      opacity: .9;
}
.stage::before {
      content:attr(data-1);
      position: absolute;
      right: 10px;
      top: 10px;
      font: 900 3em/1em Sans-seirf;
      color: white;
      text-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
#ufo {
      position: absolute;
      filter: blur(.5px);
      width: 205px; height: 124px;
      animation:fly 8s ease-in-out infinite alternate;
}
#ufo::after {
      content: '';
      left: 80px; bottom: -10px;
      position: absolute;
      width: 0px;
      height: 0px;
      border: 20px solid;
      border-color: transparent transparent green transparent;
      filter: blur(1px);
      opacity: .6;
      transition: .5s;
      transform-origin: 050%;
      transform: scale(5,30) ;
      animation: rot 8s ease-in-out infinite alternate;
}

@keyframes fly { to { transform: rotate(20deg) translate(1100px); } }
@keyframes rot { to { transform: rotate(30deg) scale(15,20) ; } }
</style>

<div class="stage" data-1="苍穹之下">
      <div id="ufo">
                <img alt="" src="https://pic.imgdb.cn/item/624d959d239250f7c52d069d.gif" width="157" height="104" />
      </div>
</div>

<script>
let stage = document.querySelector('.stage');
let aud = document.createElement('audio');
aud.src = 'http://www.kumeiwp.com/sub/filestores/2022/04/06/6297fef297b8117e5357d3520b547982.mp3';
aud.autoplay = true;
aud.loop = true;
stage.appendChild(aud);
stage.onclick = () => { aud.paused ? aud.play() : aud.pause(); }
</script>

加林森 发表于 2022-4-6 21:38

@马黑黑

绿叶清舟 发表于 2022-4-6 21:39

队长厉害啊，这么快出来了

加林森 发表于 2022-4-6 21:48

绿叶清舟 发表于 2022-4-6 21:39
队长厉害啊，这么快出来了

跟到学习的。{:4_189:}

绿叶清舟 发表于 2022-4-6 21:53

加林森 发表于 2022-4-6 21:48
跟到学习的。

学得也太快了啊

加林森 发表于 2022-4-6 21:54

绿叶清舟 发表于 2022-4-6 21:53
学得也太快了啊

琢磨了一下午了

马黑黑 发表于 2022-4-6 21:59

做出来了，不错

红影 发表于 2022-4-6 22:02

队长学得真快，很棒{:4_187:}

加林森 发表于 2022-4-6 22:02

马黑黑 发表于 2022-4-6 21:59
做出来了，不错

嗯嗯，只是背景图不是动态的。

马黑黑 发表于 2022-4-6 22:03

加林森 发表于 2022-4-6 22:02
嗯嗯，只是背景图不是动态的。

没关系，都可以的

加林森 发表于 2022-4-6 22:04

红影 发表于 2022-4-6 22:02
队长学得真快，很棒

谢谢红影。{:4_204:}

加林森 发表于 2022-4-6 22:11

马黑黑 发表于 2022-4-6 22:03
没关系，都可以的

嗯嗯，缺少了梦幻的气势了。

大猫咪 发表于 2022-4-6 22:37

好漂亮的制作   歌也好听{:4_187:} 队长真棒！赞！！！！！！！！！

{:4_204:}{:4_199:}

加林森 发表于 2022-4-6 23:13

大猫咪 发表于 2022-4-6 22:37
好漂亮的制作   歌也好听   队长真棒！赞！！！！！！！！！

猫猫看见啦。跟到学习的。{:4_204:}{:4_190:}

马黑黑 发表于 2022-4-7 07:10

加林森 发表于 2022-4-6 22:11
嗯嗯，缺少了梦幻的气势了。

不同元素营造出来的效果不一样，看主题需要

加林森 发表于 2022-4-7 08:27

马黑黑 发表于 2022-4-7 07:10
不同元素营造出来的效果不一样，看主题需要

是的是的

梦油 发表于 2022-4-7 10:32

加版早晨好！欣赏着你的精美制作，羡慕极啦。

加林森 发表于 2022-4-7 10:38

梦油 发表于 2022-4-7 10:32
加版早晨好！欣赏着你的精美制作，羡慕极啦。

梦油上午好，我也是跟到学习的。你也可以学习的。

梦油 发表于 2022-4-7 10:47

加林森 发表于 2022-4-7 10:38
梦油上午好，我也是跟到学习的。你也可以学习的。

哈哈哈，俺是一个电脑盲。{:4_189:}更多的还是欣赏和学习。

加林森 发表于 2022-4-7 11:08

梦油 发表于 2022-4-7 10:47
哈哈哈，俺是一个电脑盲。更多的还是欣赏和学习。

嗯嗯，先看老黑的教程，慢慢理解就行了。
页: [1] 2
查看完整版本: 《苍穹之下》 -- 摩登兄弟刘宇宁