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

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

本帖最后由加林森于 2022-4-9 11:28 编辑 <br /><br /><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 00:05

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

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

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

@马黑黑

红影发表于 2022-4-9 07:27

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

听到的歌词和队长附的歌词不一样啊{:4_203:}

红影发表于 2022-4-9 07:29

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

歌曲和图片的选择都很好，图片上最好把水印去掉{:4_187:}

马黑黑 发表于 2022-4-9 08:23

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

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

left: 20px;
top: 20px;

改为：

right: 20px;
top: 20px;

樵歌发表于 2022-4-9 09:06

大有那个年代的宣传画，满满正能量。{:4_199:}

小九发表于 2022-4-9 09:25

队长真厉害！{:4_199:}

小九发表于 2022-4-9 09:26

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

加林森 发表于 2022-4-9 12:01

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

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

加林森 发表于 2022-4-9 12:02

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

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

好的好的

加林森 发表于 2022-4-9 12:02

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

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

修改了，谢谢老黑！{:4_190:}

加林森 发表于 2022-4-9 12:03

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

嗯嗯，樵歌中午好！

马黑黑 发表于 2022-4-9 12:03

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

这样很不错

加林森 发表于 2022-4-9 12:04

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

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

加林森 发表于 2022-4-9 12:05

小九发表于 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:06

马黑黑发表于 2022-4-9 12:03
这样很不错

嗯嗯，现在就是最漂亮的了。{:5_108:}

马黑黑 发表于 2022-4-9 12:10

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

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

加林森 发表于 2022-4-9 12:11

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

谢谢老黑。{:4_190:}

马黑黑 发表于 2022-4-9 12:11

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

不客气

页: [1] 2

花潮论坛's Archiver

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