抗疫歌曲《人间有爱》-- 张尧（根据老黑的教程制作）

加林森

加林森

人间有爱歌曲歌词
作词 : 张尧
作曲 : 张尧
当没人知道这病毒突然来袭，
人们茫然面对着瘟疫，
是白衣天使，
是英雄卫士，
用生命唤醒我和你；
当明天阳光依然照耀大地，
我们生活还可以继续，
是心的传递，
是爱的旨意，
用无悔青春创造着奇迹！
他们也有自己的小家，
他们也是爸爸妈妈，
他们奋不顾身，
冲在一线，
与亲人咫尺天涯；
他们也有年迈的父母，
面对死亡却不害怕，
他们内心坚强，
救死扶伤，
一心一意报效国家！
人间有爱，无数生命能够重来，
手拉着手，不负人民美好期待，
拨云见日，待春暖花开，
我们一起赶走阴霾。
人间有爱，在这没有硝烟的时代，
信念与梦想成就不一样的精彩，
也许某天，与世界分开，
还来不及向所有的人    告白
他们也有自己的小家，
他们也是爸爸妈妈，
他们奋不顾身，
冲在一线，
与亲人咫尺天涯；
他们也有年迈的父母，
面对死亡却不害怕，
他们内心坚强，
救死扶伤，
一心一意报效国家！
人间有爱，无数生命能够重来，
手拉着手，不负人民美好期待，
拨云见日，待春暖花开，
我们一起赶走阴霾。
人间有爱，在这没有硝烟的时代，
信念与梦想成就不一样的精彩，
也许某天，与世界分开，
还来不及向所有的人    告白
人间有爱，无数生命能够重来，
手拉着手，不负人民美好期待，
拨云见日，待春暖花开，
我们一起赶走阴霾。
人间有爱，在这没有硝烟的时代，
信念与梦想成就不一样的精彩，
也许某天，与世界分开，
还来不及向所有的人    告白

加林森

@马黑黑

红影

加林森 发表于 2022-4-9 00:05
歌曲歌词
人间有爱 无处不在，
人间有爱 温暖常在，

听到的歌词和队长附的歌词不一样啊

红影

队长又一次弄错歌词，下回还是自己先听一下，是不是对的歌词然后再贴吧

歌曲和图片的选择都很好，图片上最好把水印去掉

马黑黑

帖子主体不错，制作精美。

作为布局，帖子的空旷区域在右上角，音乐控制器放在那里更好一些。.circle CSS选择器的定位，

        left: 20px;
        top: 20px;

改为：

        right: 20px;
        top: 20px;

樵歌

大有那个年代的宣传画，满满正能量。

小九

队长真厉害！

小九

队长，代码分享一个，我看了黑黑的代码，不知道该如何放图片呢

加林森

红影 发表于 2022-4-9 07:27
听到的歌词和队长附的歌词不一样啊

现在修改了，昨晚太晚了，没有太注意。

加林森

红影 发表于 2022-4-9 07:29
队长又一次弄错歌词，下回还是自己先听一下，是不是对的歌词然后再贴吧

歌曲和图片的选择都很 ...

好的好的

加林森

马黑黑 发表于 2022-4-9 08:23
帖子主体不错，制作精美。

作为布局，帖子的空旷区域在右上角，音乐控制器放在那里更好一些。.circle CS ...

修改了，谢谢老黑！

加林森

樵歌 发表于 2022-4-9 09:06
大有那个年代的宣传画，满满正能量。

嗯嗯，樵歌中午好！

马黑黑

加林森 发表于 2022-4-9 12:02
修改了，谢谢老黑！

这样很不错

加林森

小九 发表于 2022-4-9 09:25
队长真厉害！

不厉害啊，跟着老黑学习的。

加林森

小九 发表于 2022-4-9 09:26
队长，代码分享一个，我看了黑黑的代码，不知道该如何放图片呢

这个是代码：

<style>
.stage{
        margin: auto;
        position: relative;
        left: -214px;
        width: 1024px;
        height: 600px;
        background: #666 url('https://pic.imgdb.cn/item/6250fd31239250f7c57861df.jpg') 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);
        right: 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 = 'https://music.163.com/song/media/outer/url?id=1421053464.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 12:03
这样很不错

嗯嗯，现在就是最漂亮的了。

马黑黑

加林森 发表于 2022-4-9 12:06
嗯嗯，现在就是最漂亮的了。

空间布局，不一定都均匀分布各个元素，我们的国画所谓的留白艺术就很特别。做帖呢，先整体看看自己的帖子，再重新审定需要什么样的布局

加林森

马黑黑 发表于 2022-4-9 12:10
空间布局，不一定都均匀分布各个元素，我们的国画所谓的留白艺术就很特别。做帖呢，先整体看看自己的帖子 ...

谢谢老黑。

马黑黑

加林森 发表于 2022-4-9 12:11
谢谢老黑。

不客气