加林森 发表于 2022-4-9 22:06

《追光者》 -- 岑宁儿

本帖最后由 加林森 于 2022-4-9 23:01 编辑 <br /><br /><style>
.stage{
        margin: auto;
        position: relative;
        left: -60px;
        width: 440px;
        height: 257px;
        background: #666 url('https://www.huachaowang.com/forum.php?mod=image&aid=41610&size=300x300&key=a878a3cbec54fce2&nocache=yes&type=fixnone') no-repeat center/cover;
        perspective: 3000px;
        perspective-origin: 50% 50%;
        cursor: pointer;
}
.stage::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background: url('https://638183.freep.cn/638183/Pic/2022/smoke1.gif') no-repeat center/cover;
        opacity: .1;
}
.circle {
        --x: 80px;
        position: absolute;
        width: var(--x);
        height: var(--x);
        left: 20px;
      top: 20px;
        transform-style: preserve-3d;
        animation: rot 5s linear infinite;
}
.circle div {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid skyblue;
        border-radius: 50%;
        padding: 0;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
        0%{ transform: rotateZ(30deg) rotateY(0turn);}
        100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<div class="stage">
        <div class="circle">
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
                <div></div>
        </div>
</div>

<script>
var au = document.createElement('audio');
au.src = 'http://www.kumeiwp.com/sub/filestores/2021/02/24/514624f352b5b765149dd19a279af7c6.mp3';
au.loop = true;
au.autoplay = true;
document.querySelector('.stage').appendChild(au);
document.querySelector('.circle').onclick = function() {
        au.paused ? (au.play(), this.style.animationPlayState = 'running') : (au.pause(), this.style.animationPlayState = 'paused');
}
</script>

加林森 发表于 2022-4-9 22:06

本帖最后由 加林森 于 2022-4-9 22:07 编辑


追光者--岑宁儿

你是海上的烟火
我是浪花的泡沫
某一刻
你的光照亮了我
如果说
你是遥远的星河
耀眼得让人想哭
我是追逐着你的眼眸
总在孤单时候眺望夜空
我可以跟在你身后
像影子追着光梦游
我可以等在这路口
不管你会不会经过
每当我为你抬起头
连眼泪都觉得自由
有的爱像阳光倾落
边拥有边失去着
如果说
你是夏夜的萤火
孩子们为你唱歌
那么我
是想要画你的手
你看我
多么渺小一个我
因为你有梦可做
也许你不会为我停留
那就让我站在你的背后
我可以跟在你身后
像影子追着光梦游
我可以等在这路口
不管你会不会经过
每当我为你抬起头
连眼泪都觉得自由
有的爱像大雨滂沱
却依然相信彩虹
我可以跟在你身后
像影子追着光梦游
我可以等在这路口
不管你会不会经过
每当我为你抬起头
连眼泪都觉得自由
有的爱像大雨滂沱
却依然相信彩虹


红影 发表于 2022-4-9 22:23

队长把这个效果用到动图里了呢，真漂亮{:4_187:}

大猫咪 发表于 2022-4-9 22:33

这个制作效果漂亮， 队长真棒！歌也非常好听！赞！

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

加林森 发表于 2022-4-9 22:52

大猫咪 发表于 2022-4-9 22:33
这个制作效果漂亮， 队长真棒！歌也非常好听！赞！

谢谢猫猫、我刚才去洗漱了！{:4_179:}

大猫咪 发表于 2022-4-9 22:53

加林森 发表于 2022-4-9 22:52
谢谢猫猫、我刚才去洗漱了！

嗯嗯   队长辛苦   时间差不多了   早点休息   注意身体！

{:4_204:}{:4_179:}

加林森 发表于 2022-4-9 22:55

红影 发表于 2022-4-9 22:23
队长把这个效果用到动图里了呢，真漂亮

谢谢红影~
我制作了一个小的，你感觉怎么样？{:4_187:}

加林森 发表于 2022-4-9 22:59

大猫咪 发表于 2022-4-9 22:53
嗯嗯   队长辛苦   时间差不多了   早点休息   注意身体！

好的好的，猫猫真乖！{:4_179:}{:4_204:}

加林森 发表于 2022-4-9 23:00

@马黑黑

朵拉 发表于 2022-4-9 23:13

森队运用的真好，我要更努力学习{:4_190:}

加林森 发表于 2022-4-9 23:26

朵拉 发表于 2022-4-9 23:13
森队运用的真好，我要更努力学习

朵拉晚上好。别客气啊。你喜欢就好。周末快乐！{:4_187:}

马黑黑 发表于 2022-4-10 09:04

这个地球仪还少一根轴呢{:5_117:}

加林森 发表于 2022-4-10 11:17

马黑黑 发表于 2022-4-10 09:04
这个地球仪还少一根轴呢

不要轴了，就这样挺好看的。

马黑黑 发表于 2022-4-10 11:19

加林森 发表于 2022-4-10 11:17
不要轴了，就这样挺好看的。

嗯，不错的

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

马黑黑 发表于 2022-4-10 11:19
嗯，不错的

就是，挺漂亮的。

马黑黑 发表于 2022-4-10 11:24

加林森 发表于 2022-4-10 11:22
就是，挺漂亮的。

{:4_190:}

加林森 发表于 2022-4-10 11:35

马黑黑 发表于 2022-4-10 11:24


谢谢！

马黑黑 发表于 2022-4-10 11:59

加林森 发表于 2022-4-10 11:35
谢谢！

{:5_108:}

加林森 发表于 2022-4-10 12:39

马黑黑 发表于 2022-4-10 11:59


{:5_108:}

红影 发表于 2022-4-10 15:02

加林森 发表于 2022-4-9 22:55
谢谢红影~
我制作了一个小的，你感觉怎么样？

也挺好的，队长学得很认真{:4_187:}
页: [1] 2
查看完整版本: 《追光者》 -- 岑宁儿