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

光柱能否总是跟着UFO

本帖最后由 马黑黑 于 2022-4-6 15:44 编辑 <br /><br /><style>
.stage {
        position: relative;
        left: -352px;
        width: 1300px;
        height: 533px;
        background: #000 url('https://638183.freep.cn/638183/Pic/2022/jz.gif') no-repeat center/cover;
        filter: blur(1px);
        cursor: pointer;
}
.stage::before {
        content:attr(data-1);
        position: absolute;
        right: 10px;
        top: 10px;
        font: 900 3em/1em Sans-seirf;
        color: green;
        text-shadow: 2px 2px 4px rgba(0,0,0,.6);
}
.light {
        position: absolute;
        bottom: 0;
        width: 0px;
        height: 0px;
        border: 12px solid;
        border-color: transparent green transparent transparent;
        filter: blur(1px);
        opacity: .6;
        transition: .5s;
        transform-origin: 50% 0;
        transform: scale(80,1.2);
        animation: rot 8s ease-in-out infinite alternate;
}
#ufo {
        filter: blur(.5px);
        width: 205px; height: 124px;
        animation:fly 8s -8s ease-in-out infinite alternate;
}
@keyframes fly { to { transform: rotate(20deg) translate(1100px); } }
@keyframes rot { to { transform: rotate(-80deg) scale(30,2.5); }
}
</style>

<div class="stage" data-1="邓典·极光">
        <div class="light"></div>
        <img alt="" id="ufo" src="https://638183.freep.cn/638183/Pic/2022/feidie.gif" width="205" height="124" />
</div>

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

红影 发表于 2022-4-6 15:38

哈哈，真会玩，这样看着ufo好像被灯柱牵着一样{:4_173:}

马黑黑 发表于 2022-4-6 15:39

红影 发表于 2022-4-6 15:38
哈哈，真会玩，这样看着ufo好像被灯柱牵着一样

是监视吧。不过，两者的运行总长不一致，所以不完全能够同步。

红影 发表于 2022-4-6 15:39

还不如让灯柱顶点跟在UFO下面呢，这样好像外星人来了，正在扫描地球一样{:4_189:}

马黑黑 发表于 2022-4-6 15:41

红影 发表于 2022-4-6 15:39
还不如让灯柱顶点跟在UFO下面呢，这样好像外星人来了，正在扫描地球一样

这是最常见的，常规的。地球人已经不是那么被动了，有能力监控它了。

红影 发表于 2022-4-6 15:41

能让UFO一边飞，灯柱跟在它下面一边扫么，好像有点困难呢。

马黑黑 发表于 2022-4-6 15:43

红影 发表于 2022-4-6 15:41
能让UFO一边飞，灯柱跟在它下面一边扫么，好像有点困难呢。

可以的。让光柱成为 img 的子元素。这个要大改装：

img置于一个div内，成为这个这个div的子元素，同时，让这个div再有一个子元素（伪元素也成），让光从它那里发射。

红影 发表于 2022-4-6 21:39

马黑黑 发表于 2022-4-6 15:39
是监视吧。不过，两者的运行总长不一致，所以不完全能够同步。

已经挺同步了，黑黑真棒{:4_187:}

红影 发表于 2022-4-6 21:43

马黑黑 发表于 2022-4-6 15:41
这是最常见的，常规的。地球人已经不是那么被动了，有能力监控它了。

它要真下来了，地球人可能打不过他们{:4_173:}

红影 发表于 2022-4-6 21:44

马黑黑 发表于 2022-4-6 15:43
可以的。让光柱成为 img 的子元素。这个要大改装：

img置于一个div内，成为这个这个div的子元素，同时 ...

看到黑黑已经做出来了，厉害{:4_199:}

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

红影 发表于 2022-4-6 21:44
看到黑黑已经做出来了，厉害

一般一般

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

红影 发表于 2022-4-6 21:43
它要真下来了，地球人可能打不过他们

不一定的，地球上的新病毒他们可以也应付不了

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

红影 发表于 2022-4-6 21:39
已经挺同步了，黑黑真棒

一般一般，全班倒数第三

红影 发表于 2022-4-7 12:56

马黑黑 发表于 2022-4-6 22:00
不一定的，地球上的新病毒他们可以也应付不了

哈哈，有道理。看起来折磨我们这么久的病毒也不是一无是处啊{:4_173:}

红影 发表于 2022-4-7 12:59

马黑黑 发表于 2022-4-6 22:00
一般一般，全班倒数第三

你们那个一定是神仙班{:4_173:}

马黑黑 发表于 2022-4-7 13:11

红影 发表于 2022-4-7 12:59
你们那个一定是神仙班

不知道有木有这个班，我去找找

马黑黑 发表于 2022-4-7 13:11

红影 发表于 2022-4-7 12:56
哈哈，有道理。看起来折磨我们这么久的病毒也不是一无是处啊

并且，对于外星人，我们人类就是病毒

红影 发表于 2022-4-7 21:10

马黑黑 发表于 2022-4-7 13:11
不知道有木有这个班，我去找找

我本来想写神童班，怕你抗议，改了神仙{:4_173:}

红影 发表于 2022-4-7 21:10

马黑黑 发表于 2022-4-7 13:11
并且，对于外星人，我们人类就是病毒

我们不是病毒，只是病毒载体而已{:4_173:}

马黑黑 发表于 2022-4-7 22:05

红影 发表于 2022-4-7 21:10
我们不是病毒，只是病毒载体而已

这是基于我们这个基点看问题。外形人可不是这样的视角。
页: [1] 2
查看完整版本: 光柱能否总是跟着UFO