论坛 › 欢乐水吧 › 《五一纪念歌》祝大家节日快乐！

红影 发表于 2022-5-1 09:00

《五一纪念歌》祝大家节日快乐！

<style>
.hy { left: -252px; top:100px;background-color: #eee;width: 1100px; height: 616px; position: relative; }
.hy img { position: absolute; border: 20; }

.hy::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 50%;
      background: url('https://pic.imgdb.cn/item/626dd2ef239250f7c53f0f33.gif') no-repeat center/cover;
      left:80px; top: 0px;
}

.mBox {
        --w: 60px; /* 尺寸 */
        left:542px;
        top: 310px;
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--w);
        height: var(--w);
        cursor: pointer;
        position: relative;

        animation: rot 1.6s linear infinite;
}
.mBox span {
        position: absolute;
        width: inherit;
        height: inherit;
        display: block;
      background-color: #fff;
      background-image: radial-gradient(circle, red , #FFC125 4px, #F4A460 20px, red);
       
}
.mBox span:nth-child(1) { transform: rotate(0deg); }
.mBox span:nth-child(2) { transform: rotate(120deg); }
.mBox span:nth-child(3) { transform: rotate(240deg); }
.mBox span:nth-child(4) { width: 8px; height: 8px; border-radius: 50%; }

@keyframes rot { to { transform: rotate(1turn); } }
</style>

<div class="hy">

<img style="top:0; right: 0; width: 1100px; box-shadow: 4px 4px 5px #888; mix-blend-mode: multiply;"

src="https://pic.imgdb.cn/item/626dd1c2239250f7c53d4176.jpg" alt="" />

<div class="mBox"><span></span><span></span><span></span><span></span></div>       
</div><br><br><br><br><br><br>

<script>
let hy = document.querySelector(".hy");
chgc();
let cc = setInterval(chgc, 2000);

function chgc(){
        let c1 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        let c2 = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
        hy.style.background = `linear-gradient(120deg,${c1},${c2})`;
}

let mBox = document.querySelector(".mBox");
let au = document.createElement("audio");
let flag = true;
au.src = "https://music.163.com/song/media/outer/url?id=1852326295.mp3";
au.autoplay = flag;
au.loop = true;
au.style.display = "none";
mBox.appendChild(au);
if(!flag) mBox.style.animationPlayState = "paused";
mBox.onclick = function(){
        flag ? (au.pause(),this.style.animationPlayState = "paused",flag = false) : (au.play

(),this.style.animationPlayState = "running",flag = true);
}
</script>

红影 发表于 2022-5-1 09:00

《五一纪念歌》

美哉自由
世界明星
拼吾热血
为他牺牲
要把强权制度一切扫除净
记取五月一日之良辰
红旗飞舞
走光明路
各尽所能
各取所需
不分贫富贵贱责任唯互助
惟愿大家努力齐进取
写下远大的宏愿
收获满满的信念
描绘美好的蓝天
共筑未来的诗篇
共筑未来的诗篇
拼搏奋斗
英勇不屈
竭尽所能
顽强斗争
要把强权制度一切扫除净
记取五月一日之良辰
红星闪耀
绽放光芒
苦难同担
福贵同享
不分贫富贵贱责任唯互助
惟愿大家努力齐进取
实现远大的宏愿
续写美好的明天
坚定步伐和信念
创造未来的诗篇
共筑未来的诗篇
实现远大的宏愿
续写美好的明天
坚定步伐和信念
创造未来的诗篇
创造未来的诗篇

红影 发表于 2022-5-1 09:02

@马黑黑和你上次说起的做个节日庆祝的背景变色，没去找夜景，发现不是夜景也挺好。
把上次弄的风火轮放在这里做那个5.1之间的点了{:4_173:}

红影 发表于 2022-5-1 09:04

去搜有关五一的歌曲，看到了这首，作词 : 邓中夏、作曲 : 黄克春、编曲 : 李子梁

看歌词文绉绉的，非常正气。应该是很早以前的歌曲吧。

马黑黑 发表于 2022-5-1 09:12

齿轮用在这里很合适，工业元素意味浓厚。很赞。

加林森 发表于 2022-5-1 09:16

祝大家五一节快乐！{:4_204:}

小九 发表于 2022-5-1 09:57

祝大家五一劳动节快乐{:4_187:}

小九 发表于 2022-5-1 09:57

那个转动的风火轮，很有劳动的气势哈{:4_199:}

梦油 发表于 2022-5-1 13:35

红影朋友大制作显示了工人阶级的豪迈和激情。我愿借红影朋友的美帖，祝伟大的工人朋友们艰苦奋斗、争创一流。祝花潮朋友们节日快乐、身体健康。

红影 发表于 2022-5-2 09:54

马黑黑 发表于 2022-5-1 09:12
齿轮用在这里很合适，工业元素意味浓厚。很赞。

上次配色玩的，这次就直接用上了{:4_173:}

红影 发表于 2022-5-2 09:55

加林森 发表于 2022-5-1 09:16
祝大家五一节快乐！

谢谢队长，也祝你节日快乐{:4_187:}

红影 发表于 2022-5-2 09:55

小九 发表于 2022-5-1 09:57
祝大家五一劳动节快乐

九儿节日快乐{:4_187:}

红影 发表于 2022-5-2 09:55

小九 发表于 2022-5-1 09:57
那个转动的风火轮，很有劳动的气势哈

上次学的填了颜色，这次正好派了用场{:4_173:}

红影 发表于 2022-5-2 09:56

梦油 发表于 2022-5-1 13:35
红影朋友大制作显示了工人阶级的豪迈和激情。我愿借红影朋友的美帖，祝伟大的工人朋友们艰苦奋斗、争创一流 ...

谢谢梦油的美好祝福，也祝你节日快乐{:4_187:}

马黑黑 发表于 2022-5-2 09:56

红影 发表于 2022-5-2 09:54
上次配色玩的，这次就直接用上了

收获不小

红影 发表于 2022-5-2 11:16

马黑黑 发表于 2022-5-2 09:56
收获不小

是啊，试验的用上了，很省力{:4_173:}

马黑黑 发表于 2022-5-2 11:28

红影 发表于 2022-5-2 11:16
是啊，试验的用上了，很省力

挺好的

加林森 发表于 2022-5-2 11:57

红影 发表于 2022-5-2 09:55
谢谢队长，也祝你节日快乐

同乐，大家一起快乐！

梦油 发表于 2022-5-2 12:39

红影 发表于 2022-5-2 09:56
谢谢梦油的美好祝福，也祝你节日快乐

谢谢红影朋友！

红影 发表于 2022-5-2 14:22

马黑黑 发表于 2022-5-2 11:28
挺好的

你的那个花环还没想好用在哪里呢。

查看完整版本: 《五一纪念歌》祝大家节日快乐！