马黑黑 发表于 2022-4-2 12:18

窗外

<style type="text/css">
.outwin {
        width: 1201px;
        height: 799px;
        background: gray url('https://www.huachaowang.com/data/attachment/forum/202204/02/121501av7i41aw7t7usues.jpg');
        position: relative;
        left: -300px;
        opacity: .85;
}
.outwin::before {
        content: '';
        width: 80%;
        height: 80%;
        position: absolute;
        background: transparent url('https://www.huachaowang.com//data/attachment/forum/202204/02/082246n566q71e3o7nwev3.gif');
        filter: blur(5px);
}
.outwin::after {
        content: attr(data-hh);
        position: absolute;
        right: 10px;
        top: 10px;
        color: transparent;
        font: bold 3em Sans-serif;
        writing-mode: vertical-lr;
        text-shadow: 2px 2px 3px #D5BF77;
}

</style>

<div class="outwin" data-hh="窗外"></div>

<script language="javascript">
let yyy = document.createElement('iframe');
yyy.src = 'https://music.163.com/outchain/player?type=2&id=26896342&auto=1&height=66';
yyy.style.display = 'none';
document.querySelector('.outwin').appendChild(yyy);

</script>

加林森 发表于 2022-4-2 12:20

好听好看，老黑真棒！{:4_199:}

马黑黑 发表于 2022-4-2 12:32

加林森 发表于 2022-4-2 12:20
好听好看，老黑真棒！

感谢支持

马黑黑 发表于 2022-4-2 12:34

帖子还是为了进一步演示用伪元素做帖子的教程，帖子代码如下：

<style type="text/css">
.outwin {
        width: 1201px;
        height: 799px;
        background: gray url('/data/attachment/forum/202204/02/121501av7i41aw7t7usues.jpg');
        position: relative;
        opacity: .85;
}
.outwin::before {
        content: '';
        width: 80%;
        height: 80%;
        position: absolute;
        background: transparent url('/data/attachment/forum/202204/02/082246n566q71e3o7nwev3.gif');
        filter: blur(5px);
}
.outwin::after {
        content: attr(data-hh);
        position: absolute;
        right: 10px;
        top: 10px;
        color: transparent;
        font: bold 3em Sans-serif;
        writing-mode: vertical-lr;
        text-shadow: 2px 2px 3px #D5BF77;
}
</style>

<div class="outwin" data-hh="窗外"></div>

<script language="javascript">
let yyy = document.createElement('iframe');
yyy.src = 'https://music.163.com/outchain/player?type=2&id=26896342&auto=1&height=66';
yyy.style.display = 'none';
document.querySelector('.outwin').appendChild(yyy);
</script>

加林森 发表于 2022-4-2 12:43

马黑黑 发表于 2022-4-2 12:32
感谢支持

不客气的。{:4_190:}

大猫咪 发表于 2022-4-2 12:49

这制作感觉真好！看着特别舒服   必须学习 ，谢谢老黑{:5_106:}真棒！中午好{:4_204:}{:4_179:}

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

80%的高和宽，真好让动图覆盖了窗，真棒。欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2022-4-2 16:04

红影 发表于 2022-4-2 14:22
80%的高和宽，真好让动图覆盖了窗，真棒。欣赏黑黑好帖

也可以用px

加林森 发表于 2022-4-2 17:11

再来领会其精华。

红影 发表于 2022-4-2 19:31

马黑黑 发表于 2022-4-2 16:04
也可以用px

嗯嗯，用伪元素做平铺，记下了{:4_187:}

马黑黑 发表于 2022-4-2 20:07

红影 发表于 2022-4-2 19:31
嗯嗯，用伪元素做平铺，记下了

{:4_181:}

小九 发表于 2022-4-3 09:02

窗外漂亮的雪花{:4_204:}

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

小九 发表于 2022-4-3 09:02
窗外漂亮的雪花

问好小九

加林森 发表于 2022-4-3 14:50

再来欣赏

马黑黑 发表于 2022-4-3 15:39

加林森 发表于 2022-4-3 14:50
再来欣赏

喝茶
{:4_180:}

安宁 发表于 2022-4-3 15:43

让我想起大广东专利，南墩墩……回南天来了

马黑黑 发表于 2022-4-3 15:55

安宁 发表于 2022-4-3 15:43
让我想起大广东专利，南墩墩……回南天来了

空气很潮湿

安宁 发表于 2022-4-3 16:28

马黑黑 发表于 2022-4-3 15:55
空气很潮湿

不宜烤蟹

马黑黑 发表于 2022-4-3 16:37

安宁 发表于 2022-4-3 16:28
不宜烤蟹

可以煮茶喝喝

安宁 发表于 2022-4-3 16:47

马黑黑 发表于 2022-4-3 16:37
可以煮茶喝喝

一帘春欲暮，茶烟细杨落花风{:4_173:}建议采纳   烤竹篱 煮茶去{:4_170:}
页: [1] 2
查看完整版本: 窗外