朵拉 发表于 2024-8-6 20:21
老师都更新十六讲了，
学生慢慢学习哈~~
进度不强求，这是夜大一样的，不是全日制
<style>
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18px / 26px sans-serif; }
.artbox mark { color: black; background: lightblue; padding: 2px 4px; }
.textRed { color: red; }
.showDiv { position: relative; }
</style>
<div class="artbox">
<h2 class="textMid">第十七讲：CSS伪元素 ::before 和 ::after</h2>
<p><span class="textRed">伪元素</span>是CSS层面的概念，作为主选择器的附加选择器作用于HTML可视元素，是对HTML元素的补充或修饰。伪元素现已有十来多种，预计将来还会增加。本讲，我们仅学习两种做音画帖常用到的伪元素，<span class="textRed">::before</span> 和 <span class="textRed">::after</span>。伪元素作为附加给主元素CSS选择器的特殊选择器，其语句表达结构离不开主元素CSS选择器，例如，假设我们有一个class选择器 <mark>.pbox1 { ... }</mark>，则 ::before 和 ::after 伪元素选择器分别写成 <mark>.pbox1::before { ... }</mark> 和 <mark>.pbox1::after { ... }</mark>。试看代码和效果：</p>
<div class="hE"><pre id="pre1">
<style>
.pbox1 {
width: 400px;
height: 100px;
border: 1px solid gray;
background: white;
}
.pbox1::before {
content: '我是 ::before';
background: tan;
}
.pbox1::after {
content: '我是 ::after';
background: teal;
}
</style>
<div class="pbox1"></div>
</pre></div>
<p><button id="btn1" type="button" value="1">点击查看效果</button></p>
<div id="sbox1" class="showDiv"></div>
<p>::before 和 ::after 伪元素的一个重要属性是 <span class="textRed">content</span>，内容之意，可以给它赋文本值，用小角引号包裹起来。content属性不能缺失，它是两个伪元素是否生效的依托，因此，即便不想让伪元素显示任何内容，也需要它出现并给它赋空值。除了文本值，还可以使用 url() 函数给它一个图片地址，伪元素则将显示该图片的原始尺寸，此时，伪元素不能更改大小。::before 和 ::after伪元素其实本身就像是 <mark>class=".pbox1"</mark> HTML元素的子元素，除了特殊的content属性，还可以有用其他相应元素应有的属性，比如上面示例的 background 背景属性。</p>
<p>通常，拥有子元素的父元素，为了能约束子元素的布局，自身需要设置 position 属性，子元素则根据需要是否设置position属性。之前的讲义提到过，相对定位的父元素+绝对定位的子元素是我们做音画帖的配套设置，下面的示例所演示的是设置两个伪元素的位置和尺寸、形状等：</p>
<div class="hE"><pre id="pre2">
<style>
.pbox2 {
width: 400px;
height: 100px;
border: 1px solid gray;
background: white;
position: relative; /* 父元素相对定位 */
}
.pbox2::before {
content: '::before 伪元素';
position: absolute; /* 伪元素（子元素）绝对定位 */
background: tan;
width: 40%;
height: 80%;
}
.pbox2::after {
content: '::after伪元素';
position: absolute; /* 伪元素（子元素）绝对定位 */
background: teal;
width: 40%;
height: 100%;
right: 0;
}
</style>
<div class="pbox2"></div>
</pre></div>
<p><button id="btn2" type="button" value="2">点击查看效果</button></p>
<div id="sbox2" class="showDiv"></div>
<p>两个伪元素的代码有很多属性是一样的，我们可以把它们整合在一起，并依据CSS后面的设置覆盖前面的设置原理，不尽相同的也可以先整合在一块，然后在相应选择器再设置一次。上面示例的代码可以这样改写：</p>
<div class="hE"><pre>
<style>
.pbox2 {
width: 400px;
height: 100px;
border: 1px solid gray;
background: white;
position: relative; /* 父元素相对定位 */
}
.pbox2::before, .pbox2::after {
content: '::before伪元素';
position: absolute; /* 伪元素（子元素）绝对定位 */
background: tan;
width: 40%;
height: 80%;
}
.pbox2::after {
content: '::after伪元素';
background: teal;
right: 0;
height: 100%;
}
</style>
<div class="pbox2"></div>
</pre></div>
<p>注意第9行代码的写法，两个伪元素合在一起写时用小角逗号隔开。改进的代码，9~15行其实是 ::before 的属性，::after 共用其中的一部分属性，然后再另开一个 ::after 选择器，将不同于 ::before 的属性另写一遍。是否需要如此改写代码并没有严格要求，完全根据各人喜好决定。</p>
<p>作为宿主元素的子元素，伪元素有自己默认的层级关系：::before 在最底层，::after 再最高层。如果宿主元素还有其他的子元素，我们来看看伪元素和其他的子元素各自的层级关系：</p>
<div class="hE"><pre id="pre3">
<style>
.pbox3 {
width: 400px;
height: 200px;
border: 1px solid gray;
background: white;
position: relative;
}
.pbox3::before {
content: '::before伪元素';
position: absolute;
background: tan;
width: 40%;
height: 80%;
}
.pbox3::after {
content: '::after伪元素';
position: absolute;
background: teal;
width: 40%;
height: 100%;
left: 120px;
}
.mpic {
position: absolute;
left: 50px;
width: 100px;
height: 100px;
}
</style>
<div class="pbox3">
<img class="mpic" src="https://638183.freep.cn/638183/web/svg/4yecc.svg" alt="" />
</div>
</pre></div>
<p><button id="btn3" type="button" value="3">点击查看效果</button></p>
<div id="sbox3" class="showDiv"></div>
<p>可以看到，::after伪元素处在最顶层。要改变层级关系，可以给需要提升层级的子元素如上例的图片class选择器（也可以是其他选择器，如id选择器）加上 z-index 属性，例如，<mark>z-index: 10;</mark> 即可确保图片不会被 ::after 遮挡。</p>
<p>::before 和 ::after 伪元素用途广泛，充分利用好它们可以有大作为。花潮格式的lrc歌词同步机制用到它们，本讲义的代码行号用到它们，一系列的音画帖也用到它们……，总之，这两个伪元素自身就是宿主元素的子元素，完全可以当做可视的元素看待和应用。以下例子，::before 充当播放器， ::after 用来加载一张图片：</p>
<div class="hE"><pre id="pre4">
<style>
/* 宿主元素类选择器 */
.pbox4 {
width: 800px;
height: 460px;
background: url('https://638183.freep.cn/638183/t22/hl/bjehp.webp') center/cover;
position: relative;
}
/* 伪元素公共属性 */
.pbox4::before, .pbox4::after {
content: '';
position: absolute;
}
/* 播放器按钮 ：使用::bofore伪元素背景图片 */
.pbox4::before {
right: 60px;
top: 160px;
width: 80px;
height: 80px;
background: url('https://638183.freep.cn/638183/web/svg/4yecc.svg') no-repeat center/cover;
}
/* 图片 ：使用::after content属性加载 */
.pbox4::after {
content: url('https://638183.freep.cn/638183/t22/hl/kite1.gif');
left: 20%;
mix-blend-mode: hue; /* 融合滤镜 ：修饰图片 */
}
</style>
<div class="pbox4"></div>
</pre></div>
<p><button id="btn4" type="button" value="4">点击查看效果</button></p>
<div id="sbox4" class="showDiv"></div>
<p>前面提到过，content属性如果使用 url() 函数加载图片，伪元素的宽高不能人为设置，一切依据图片的尺寸，但可以使用 transform: scale() 方法对之缩放，缩放后图片的元素位置以缩放前的大小为依据。</p>
<p>最后，需要注意的是，不是所有的HTML元素都支持伪元素。一般来说，自闭合标签如 img、input 等是不支持伪元素的，设置了伪元素也将无效。不能带子元素的HTML标签如audio、video等也不支持伪元素。伪元素一般用于 div、h*、p、span或以支持伪元素标签为蓝本的自定义标签等较为合适。此外，伪元素不会获得焦点，这意味着其上的文本、图片将不可能被选中，例如讲义代码的行号，你无法选择它们。</p>
<p>作业：模仿本讲最后一个示例做一个帖子布局，其中，① 伪元素 ::before 用来做帖子标题，字号 20px 或更大，有文本阴影；② ::after 伪元素使用 url() 函数加载一个合适尺寸的静态小图片模拟播放器并设计一个 @keyframes 关键帧动画去驱动播放器的旋转。</p>
<p><a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=77307&extra=page%3D1">返回目录</a></p>
</div>
<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
var runCodes = (str,ele) => {
let reg = /(<script(.*?)>)(.|\n)*?(<\/script>)/g;
let js_str, html_str;
if(str.match(reg) !== null) {
js_str = str.match(reg);
html_str = str.replace(js_str, '').trim();
js_str = js_str.replace(/<[\/]{0,1}script[^>]*>/g,'').trim();
} else {
js_str = '';
html_str = str.trim();
}
ele.innerHTML = html_str;
let myfunc = new Function(js_str);
myfunc();
};
.forEach((btn,key) => {
var pres = ,
outs = ;
btn.onclick = () => {
runCodes(pres.innerText, outs);
btn.disabled = true;
}
});
</script>
马黑黑 发表于 2024-8-6 08:09
听起来就是误了
不不，你是悟人子弟，音同字不同{:4_173:}
红影 发表于 2024-8-6 20:39
不不，你是悟人子弟，音同字不同
听起来想到的是误
马黑黑 发表于 2024-8-6 08:12
效果很欢快的样纸
是的，炎热的夏天，效果也必须热烈{:4_173:}
马黑黑 发表于 2024-8-6 08:12
这是人的局限：喜欢对比
对比中感受更真切啊。
马黑黑 发表于 2024-8-6 08:13
可以用作图软件调整一下
做到贴子里是需要调的，这里是试验啊{:4_173:}
红影 发表于 2024-8-6 20:42
做到贴子里是需要调的，这里是试验啊
也行
红影 发表于 2024-8-6 20:42
对比中感受更真切啊。
但有时候会害死人哒{:4_170:}
红影 发表于 2024-8-6 20:41
是的，炎热的夏天，效果也必须热烈
出出汗也挺好
马黑黑 发表于 2024-8-5 07:54
.artbox { position: relative; }
.artbox > p { position: relative; margin: 10px 0; font: normal 18 ...
这个pic5很奇特，变成单位长度就跑两边去了，若用百分比，即使是50% 0，也在中间。
但是用长度，把后面的也取一半长度，就跑四角去了。而且237无论取正负貌似都一样。
<style>
.hy5 {
mask: radial-gradient(circle, transparent 40px, red 42px, red 0) 237px 148px / 100% 100%;
-webkit-mask: radial-gradient(circle, transparent 40px, red 42px, red 0) 237px 148px / 100% 100%;
}
</style>
<img class="hy5" src="https://638183.freep.cn/638183/t24/4/lake.jpg" alt="" />
红影 发表于 2024-8-6 20:45
这个pic5很奇特，变成单位长度就跑两边去了，若用百分比，即使是50% 0，也在中间。
但是用长度，把后面 ...
我哪里有提示，那种做法就是得用实体像素单位并根据源计算好尺寸。如果你需要做其他的位置设计，大概道理与此同时。
红影 发表于 2024-8-6 20:47
.hy5 {
mask: radial-gradient(circle, transparent 40px, red 42px, red 0) 237px 148px / 100% 100 ...
切四个角很简单的，有多重实现方法
<style>
.vidyz {
width: 600px;
height: 360px;
object-fit: cover;
-webkit-mask: linear-gradient(to top right, red 90%, transparent 91%, transparent 0);
}
</style>
<video class="vidyz" src="https://img.tukuppt.com/video_show/2418175/00/01/57/5b463b779e454_10s_big.mp4" autoplay loop></video>
红影 发表于 2024-8-6 20:56
.vidyz {
width: 600px;
height: 360px;
十六讲作业，十七讲还没来得及看{:4_173:}
马黑黑 发表于 2024-8-6 20:49
切四个角很简单的，有多重实现方法
嗯嗯，我只是做个试验，这也可以简单切出来了。
马黑黑 发表于 2024-8-6 20:49
我哪里有提示，那种做法就是得用实体像素单位并根据源计算好尺寸。如果你需要做其他的位置设计，大概道理 ...
这个挺难想明白，为什么长度和百分比得到的结果不一样。
马黑黑 发表于 2024-8-6 20:44
也行
主要看实现效果的，不需要考虑和其他元素的相配。
马黑黑 发表于 2024-8-6 20:44
但有时候会害死人哒
不会害死人，最多悟得太透了遁入空门{:4_173:}