加林森 发表于 2022-3-14 19:54

《望》 - 周深 （根据老黑的教程制作）感谢老黑！



<style type="text/css">
/* 背景图层 */
#mama {
        margin: auto;
        position: relative;
        width: 760px;
        height: 560px;
        background: #000 url('https://pic.imgdb.cn/item/622f26fa5baa1a80abd3b3ee.jpg') no-repeat center/cover;
        background-position: 0 0;
        backdrop-filter: blur(1px);
        animation: chgBgd 1s ease infinite alternate;
}
/* 图片层 */
#sImg {
        position: absolute;
        left: 550px;
        top: 32px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        opacity: 0.8;
        filter: blur(2px);
}
/* 图片层鼠标滑过 */
#sImg:hover {
        cursor: pointer;
        filter: blur(0)brightness(110%);
        transform: rotate(180deg);
}
/* 文本层 */
#txtC {
        position: absolute;
        width: 282px;
        height: 200px;
        line-height: 200px;
        left: 20px;
        top: 20px;
        font-family: Arial;
        font-size: 2em;
        color: #eee;
        text-align: center;
        text-shadow: 1px 1px 1px #ffcc00, 2px 2px 2px #aaa;
        background: rgba(255, 255, 255,.1);
        animation: chgColor 1s ease-in-out infinite alternate;
}
/* 文本层iframe元素 */
#txtC iframe {
        position: absolute;
        left: -10px;
        top: -10px;
        border: none;
        opacity: .9;
}
/* 文本层鼠标滑过 */
#txtC:hover {
        cursor: pointer;
        filter: brightness(120%);
}
/* 文本层变色 */
@keyframes chgColor{
        0% { color: navy; }
        20% { color: green; }
        40% { color: red; }
        60% { color: white; }
        80% { color: olive; }
        100% { color: tomato; }
}

@keyframes chgBgd {
        to { background-position: -15px 0; }
}

</style>

<div id="mama">
        <div id="txtC">望 - 周深</div>
        <img id="sImg" alt="" src="https://pic.imgdb.cn/item/622f2bdc5baa1a80abd5ac54.jpg" />
</div>

<script>

var wy = document.createElement('iframe');
wy.src = "https://music.163.com/outchain/player?type=2&id=1814080666&auto=1&height=32";
document.getElementById('txtC').appendChild(wy);

</script>

红影 发表于 2022-3-14 20:09

这个父框晃动也挺好，好像正在演唱中{:4_187:}

大猫咪 发表于 2022-3-14 20:45

恭喜队长制作成功，真棒！ 歌也好听！ 喜欢

{:4_204:}{:4_190:}

加林森 发表于 2022-3-14 21:13

红影 发表于 2022-3-14 20:09
这个父框晃动也挺好，好像正在演唱中

就是，感觉画面都活了。{:4_189:}

加林森 发表于 2022-3-14 21:14

大猫咪 发表于 2022-3-14 20:45
恭喜队长制作成功，真棒！ 歌也好听！ 喜欢

谢谢猫猫。改天你也去制作一个出来玩玩。{:4_204:}{:4_190:}

大猫咪 发表于 2022-3-14 21:15

加林森 发表于 2022-3-14 21:14
谢谢猫猫。改天你也去制作一个出来玩玩。

好的 队长 {:4_179:}

红影 发表于 2022-3-14 21:19

加林森 发表于 2022-3-14 21:13
就是，感觉画面都活了。

这个效果真的挺不错的。

加林森 发表于 2022-3-14 21:23

红影 发表于 2022-3-14 21:19
这个效果真的挺不错的。

就是，老黑越来越厉害了。{:4_189:}

加林森 发表于 2022-3-14 21:24

大猫咪 发表于 2022-3-14 21:15
好的 队长

嗯嗯。{:4_179:}

马黑黑 发表于 2022-3-14 21:26

要是把东篱跳个舞放进去也挺好

加林森 发表于 2022-3-14 21:39

马黑黑 发表于 2022-3-14 21:26
要是把东篱跳个舞放进去也挺好

哈哈哈哈，这个还真不容易。{:4_190:}

绿叶清舟 发表于 2022-3-14 21:50

队长厉害{:4_199:}

小辣椒 发表于 2022-3-14 21:50

队长这个帖做的非常好，界面效果特别好{:4_178:}

加林森 发表于 2022-3-14 21:53

绿叶清舟 发表于 2022-3-14 21:50
队长厉害

谢谢清舟支持。{:4_190:}

加林森 发表于 2022-3-14 21:54

小辣椒 发表于 2022-3-14 21:50
队长这个帖做的非常好，界面效果特别好

谢谢小辣椒支持。我会继续加强训练的。{:4_190:}{:4_204:}

小辣椒 发表于 2022-3-14 21:55

队长学习也是快的，向队长学习{:4_187:}

加林森 发表于 2022-3-14 21:56

小辣椒 发表于 2022-3-14 21:55


好听的歌曲，我也喜欢的。{:4_190:}

绿叶清舟 发表于 2022-3-14 22:01

加林森 发表于 2022-3-14 21:53
谢谢清舟支持。

队长客气了

加林森 发表于 2022-3-14 22:06

绿叶清舟 发表于 2022-3-14 22:01
队长客气了

应该的啊。

小九 发表于 2022-3-14 22:22

就像看视频一样，有动感。队长技能越来越熟练了{:4_199:}
页: [1] 2
查看完整版本: 《望》 - 周深 （根据老黑的教程制作）感谢老黑！