伪元素+GIF图片：实现帖子主体的动态渲染

马黑黑

一、素材准备：

① 一张合适尺寸的帖子背景图；
② 一张透明背景的GIF小图片

二、写CSS代码

（一）主窗体  定位、尺寸、加入背景图片

.outer {
        position: relative;  /* 必须定位 */
        left: -22px; /* 根据宽度决定左移量 */
        width: 800px;
        height: 454px;
        background: olive url('背景图片地址') no-repeat center/contain;
}


（二）::before伪元素  主要用来显示标题

.outer::before {
        content: attr(data-tt); /* 标题文本变量 /*
        position: absolute; /* 必须定位 */
        padding: 8px; /* 内边距 - 为了拉开文本与边缘的距离 */
        font: bold 3em / 1.5em Sans-serif; /* 字体设定 */
        color: olive; /* 文本颜色
        text-shadow: 2px 2px 6px rgba(0, 120, 120, .6); /* 文本阴影修饰 */
        writing-mode: vertical-lr; /* 文本竖排 不需要的删掉 */
}


（三）::after伪元素 用于布置动态背景

.outer::after {
        content: ''; /* 必须 */
        position: absolute; /* 必须定位 */
        width: 100%; /* 布满整帖宽度 */
        height: 100%; /* 布满整帖高度 */
/* 如果需要局部加动态背景，则可改变宽高，并定义 left 和 top 值，
    使动图去渲染所需要的区域
*/
        background: url('gif图片地址');  /* 背景图默认设置会自动平铺 */
}


三、HTML代码  必须给出 ::before 伪元素定义的变量值（红色部分）

<div class="outer" data-tt="花潮之歌">
    <!-- 帖子的其它HTML代码 -->
</div>

马黑黑

演示素材：

一、背景图



二、GIf图片

                               
登录/注册后可看大图

马黑黑

演示代码：

1. <style type="text/css">
   
2. .outer {
   
3.         position: relative;
   
4.         left: 0px;
   
5.         width: 800px;
   
6.         height: 454px;
   
7.         background: olive url('https://www.huachaowang.com/data/attachment/forum/202204/02/093421hpmq0ppqvwqw0e1p.jpg') no-repeat center/contain;
   
8. }
   
9. .outer::before {
   
10.         content: attr(data-tt);
    
11.         position: absolute;
    
12.         padding: 8px;
    
13.         font: bold 3em / 1.5em Sans-serif;
    
14.         color: olive;
    
15.         text-shadow: 2px 2px 6px rgba(0, 120, 120, .6);
    
16.         writing-mode: vertical-lr;
    
17. }
    
18. .outer::after {
    
19.         content: '';
    
20.         position: absolute;
    
21.         width: 100%;
    
22.         height: 100%;
    
23.         background: url('https://www.huachaowang.com//data/attachment/forum/202204/02/082246n566q71e3o7nwev3.gif');
    
24. }
    
25. </style>
    
26. 
    
27. <div class="outer" data-tt="花潮之歌"></div>

复制代码

马黑黑

演示效果:

加林森

来学习

马黑黑

加林森 发表于 2022-4-2 09:43
来学习

这个容易理解，就是对伪元素要有个概念

加林森

马黑黑 发表于 2022-4-2 09:45
这个容易理解，就是对伪元素要有个概念

嗯嗯，谢谢！

红影

这个微元素的动态背景好，可以让需要满铺的动图整个覆盖图面，这个在使用飘落动图时特别有用呢

红影

文本竖排也好，这个帖子里能学习的东西很多

红影

竖排文字的分行怎么分？

马黑黑

红影 发表于 2022-4-2 10:01
竖排文字的分行怎么分？

竖排文本是可以按常规分行的，但是本演示的标题用伪元素的 attr 属性来做，它是非 DOM 项目的，它不能简单分行但可以分行。

马黑黑

红影 发表于 2022-4-2 09:51
这个微元素的动态背景好，可以让需要满铺的动图整个覆盖图面，这个在使用飘落动图时特别有用呢

你不用伪元素也是可以这么做的，用多个元素定位叠加的方法。伪元素是子元素性质的，用它也挺好。

红影

马黑黑 发表于 2022-4-2 10:05
竖排文本是可以按常规分行的，但是本演示的标题用伪元素的 attr 属性来做，它是非 DOM 项目的，它不能简 ...

哦哦，知道了。谢谢黑黑

红影

马黑黑 发表于 2022-4-2 10:07
你不用伪元素也是可以这么做的，用多个元素定位叠加的方法。伪元素是子元素性质的，用它也挺好。

还是让它自动平铺的更方便呢

红影

不过平铺的动图必须是均匀的分布的，否则会很怪异。

马黑黑

红影 发表于 2022-4-2 10:01
竖排文字的分行怎么分？

伪元素中通过 attr 属性设定的文本，要分行的话需要加工一下，分两步走:

第一步，在 伪元素的CSS代码里加入一句——

white-space: pre;

第二步，在HTML需要分行的变量赋值文本中加入一个符号 ——

<div class="outer" data-tt="花潮之歌"></div>

马黑黑

红影 发表于 2022-4-2 10:15
不过平铺的动图必须是均匀的分布的，否则会很怪异。

素材很重要，可以自己制作

马黑黑

红影 发表于 2022-4-2 10:14
哦哦，知道了。谢谢黑黑

方法在十六楼

红影

马黑黑 发表于 2022-4-2 10:16
伪元素中通过 attr 属性设定的文本，要分行的话需要加工一下，分两步走:

第一步，在 伪元素的CSS代码 ...

<div class="outer" data-tt="花潮之歌"></div>
没看出来加了什么，没分行的时候也是这句啊。
加入white-space: pre;然后分行，就会自动识别了吧。

红影

马黑黑 发表于 2022-4-2 10:17
素材很重要，可以自己制作

自己做没那本事呢，最多去找点