马黑黑 发表于 2022-4-1 14:18

祝小九生日快乐

<style>
#mnBox {
        margin: auto;
        display: flex;
        justify-content: center;
        width: 760px;
        height: 760px;
        background: linear-gradient(100deg, rgba(9, 19, 199, .5) 0%, rgba(99, 19, 219, .4) 100%);
        position: relative;
        border-radius: 50%;
        font: 900 3em / 1em Sans-serif;
        color: deeppink;
        text-shadow: 2px 2px rgba(0, 0, 0, .9);
        z-index: 10;
}
#mnBox::before {
        content: '';
        position: absolute;
        width: 760px;
        height: 760px;
        border-radius: 50%;
        background: url('https://www.huachaowang.com/data/attachment/forum/202204/01/140441rb9c4548b5899m94.jpg') no-repeat center/contain;
}
#mnBox::after {
        content: attr(data-h);
        position: absolute;
        bottom: 60px;
        text-align: center;
        filter: blur(1px);
}
</style>

<div id="mnBox" data-h="小九生日快乐"></div>

<script>
let wyyy = document.createElement('iframe');
wyyy.src = 'https://music.163.com/outchain/player?type=2&id=541326593&auto=1&height=66';
wyyy.style.display = 'none';
document.getElementById('mnBox').appendChild(wyyy);

</script>

马黑黑 发表于 2022-4-1 14:19

简单的帖子，发第三次才成功，原因是 z-index: -1 在论坛不起作用。

三三得九，都与小九有关{:4_170:}

来看你 发表于 2022-4-1 14:23

小九生日快乐 {:4_187:}{:4_177:}

马黑黑 发表于 2022-4-1 14:33

<style>
.mnBox {
        margin: auto;
        position: relative;
        display: flex;
        justify-content: center;
        width: 760px;
        height: 760px;
        background: url('https://www.huachaowang.com/data/attachment/forum/202204/01/140441rb9c4548b5899m94.jpg') no-repeat center/contain;
        border-radius: 50%;
        font: 900 3em / 1em Sans-serif;
        color: deeppink;
        text-shadow: 2px 2px rgba(0, 0, 0, .9);
}
.mnBox::before {
        content: '';
        position: absolute;
        width: 760px;
        height: 760px;
        border-radius: 50%;
        background: linear-gradient(100deg, rgba(9, 19, 199, .5) 0%, rgba(99, 19, 219, .4) 100%);
}
.mnBox::after {
        content: attr(data-h);
        position: absolute;
        bottom: 60px;
        text-align: center;
        filter: blur(1px);
        z-index: 12;
}
</style>

<div class="mnBox" data-h="小九生日快樂"></div>

马黑黑 发表于 2022-4-1 14:34

4樓才是最初設計的效果{:5_117:}

小九 发表于 2022-4-1 16:10

马黑黑 发表于 2022-4-1 14:19
简单的帖子，发第三次才成功，原因是 z-index: -1 在论坛不起作用。

三三得九，都与小九有关

听到音乐很欢快的旋律！ 谢谢黑黑！{:4_171:}{:4_187:}

小九 发表于 2022-4-1 16:11

来看你 发表于 2022-4-1 14:23
小九生日快乐

谢谢看看！一起快乐！{:4_183:}

马黑黑 发表于 2022-4-1 18:31

小九 发表于 2022-4-1 16:10
听到音乐很欢快的旋律！ 谢谢黑黑！

{:4_190:}

东篱闲人 发表于 2022-4-1 20:26

又送球？{:5_117:}

红影 发表于 2022-4-1 20:28

真漂亮。借黑黑好帖，同祝九儿生日快乐{:4_187:}

马黑黑 发表于 2022-4-1 20:30

东篱闲人 发表于 2022-4-1 20:26
又送球？

{:5_106:}

马黑黑 发表于 2022-4-1 20:30

红影 发表于 2022-4-1 20:28
真漂亮。借黑黑好帖，同祝九儿生日快乐

有点粗糙

东篱闲人 发表于 2022-4-1 20:35

马黑黑 发表于 2022-4-1 20:30


一定要注意身体啊，多保重吧。。。

马黑黑 发表于 2022-4-1 20:38

东篱闲人 发表于 2022-4-1 20:35
一定要注意身体啊，多保重吧。。。

你也是

加林森 发表于 2022-4-1 20:52

又大又园的球球，祝福小九生日快乐！{:4_204:}

马黑黑 发表于 2022-4-1 20:53

加林森 发表于 2022-4-1 20:52
又大又园的球球，祝福小九生日快乐！

{:5_108:}

加林森 发表于 2022-4-1 20:54

马黑黑 发表于 2022-4-1 20:53


{:4_190:}

大猫咪 发表于 2022-4-1 20:59


好创意。借老黑好帖，同祝小九生日快乐！

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

红影 发表于 2022-4-2 11:22

马黑黑 发表于 2022-4-1 20:30
有点粗糙

很不错啊，黑黑的帖子都是黑科技{:4_173:}

马黑黑 发表于 2022-4-2 11:54

红影 发表于 2022-4-2 11:22
很不错啊，黑黑的帖子都是黑科技

严重了
页: [1]
查看完整版本: 祝小九生日快乐