伪元素+GIF图片：实现帖子主体的动态渲染
本帖最后由 马黑黑 于 2022-4-2 09:44 编辑一、素材准备：
① 一张合适尺寸的帖子背景图；
② 一张透明背景的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>
本帖最后由 马黑黑 于 2022-4-2 09:37 编辑
演示素材：
一、背景图
二、GIf图片
https://www.huachaowang.com/data/attachment/forum/202204/02/082246n566q71e3o7nwev3.gif
演示代码：
<style type="text/css">
.outer {
position: relative;
left: 0px;
width: 800px;
height: 454px;
background: olive url('https://www.huachaowang.com/data/attachment/forum/202204/02/093421hpmq0ppqvwqw0e1p.jpg') no-repeat center/contain;
}
.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;
}
.outer::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('https://www.huachaowang.com//data/attachment/forum/202204/02/082246n566q71e3o7nwev3.gif');
}
</style>
<div class="outer" data-tt="花潮之歌"></div>
<style type="text/css">
.outer {
position: relative;
left: -22px;
width: 800px;
height: 454px;
background: olive url('https://www.huachaowang.com/data/attachment/forum/202204/02/093421hpmq0ppqvwqw0e1p.jpg') no-repeat center/contain;
}
.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;
}
.outer::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background: url('https://www.huachaowang.com//data/attachment/forum/202204/02/082246n566q71e3o7nwev3.gif');
}
</style>
<p>演示效果:<br><br></p>
<div class="outer" data-tt="花潮之歌"></div>
来学习 加林森 发表于 2022-4-2 09:43
来学习
这个容易理解，就是对伪元素要有个概念 马黑黑 发表于 2022-4-2 09:45
这个容易理解，就是对伪元素要有个概念
嗯嗯，谢谢！ 这个微元素的动态背景好，可以让需要满铺的动图整个覆盖图面，这个在使用飘落动图时特别有用呢{:4_187:} 文本竖排也好，这个帖子里能学习的东西很多{:4_187:} 竖排文字的分行怎么分？ 本帖最后由 马黑黑 于 2022-4-2 10:13 编辑
红影 发表于 2022-4-2 10:01
竖排文字的分行怎么分？
竖排文本是可以按常规分行的，但是本演示的标题用伪元素的 attr 属性来做，它是非 DOM 项目的，它不能简单分行但可以分行。 红影 发表于 2022-4-2 09:51
这个微元素的动态背景好，可以让需要满铺的动图整个覆盖图面，这个在使用飘落动图时特别有用呢
你不用伪元素也是可以这么做的，用多个元素定位叠加的方法。伪元素是子元素性质的，用它也挺好。 马黑黑 发表于 2022-4-2 10:05
竖排文本是可以按常规分行的，但是本演示的标题用伪元素的 attr 属性来做，它是非 DOM 项目的，它不能简 ...
哦哦，知道了。谢谢黑黑{:4_187:} 马黑黑 发表于 2022-4-2 10:07
你不用伪元素也是可以这么做的，用多个元素定位叠加的方法。伪元素是子元素性质的，用它也挺好。
还是让它自动平铺的更方便呢{:4_173:} 不过平铺的动图必须是均匀的分布的，否则会很怪异。 红影 发表于 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
素材很重要，可以自己制作
自己做没那本事呢，最多去找点{:4_173:}