简单的代码但需要去领悟
这里，给一个简单的CSS元素+伪元素代码，需要大家去弄懂：一、静态时结构：
① 元素和伪元素的各自形态；
② 伪元素偏移尺寸的依据；
③ 元素和伪元素能不能不设定定位；
二、动画：
④ 为什么动画放在伪元素中而不是放在元素里？
些许提示：关于动画，如果元素不设置为圆圈结构……
代码：
<style>
#fshan {
position: relative;
width: 110px;
height: 110px;
border:10px solid darkgreen;
border-radius: 50%;
background: transparent;
}
#fshan::before, #fshan::after {
content: "";
position: absolute;
background: green;
animation: zhuan .2s linear infinite;
}
#fshan::before {
left: 50px;
top: 5px;
width: 10px;
height: 100px;
}
#fshan::after {
width: 100px;
height: 10px;
left: 5px;
top: 50px;
}
@keyframes zhuan {
to { transform: rotate(360deg); }
}
</style>
<div id="fshan"></div>
去看了一下，像电风扇一样{:4_173:} 这些为什么回答不了，这是为什么呢？ 这个不懂呢，只会复制后预览一下效果 黑黑现在是越来越难了，小辣椒先去百度一下
图片不上传上来了
度娘的
总结：伪元素其实相当于伪造了一个元素，例如before,first-letter达到的效果就是伪造了一个元素，然后添加了其相应的效果而已；而伪类没有伪造元素，例如first-child只是给子元素添加样式而已。
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。
但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。 感觉这个有难度，不能一下子掌握的 有点看不太懂。把老黑的代码去试了一下，还挺好看的。 小辣椒 发表于 2022-2-19 22:22
感觉这个有难度，不能一下子掌握的
① 元素和伪元素的各自形态：
元素div，背景色是透明的，它的形态由border来呈现：border的尺寸以及形状（border-radius:50%）令其外观为一个圆圈；
before伪元素和after伪元素以自身的高宽各自构成长方形，然后通过位置移动组建成一个十字架。二者的位置移动恰到好处，与元素一起构成一个简易的圆形排气扇。
小辣椒 发表于 2022-2-19 22:22
感觉这个有难度，不能一下子掌握的
② 伪元素偏移尺寸的依据；
偏移位置需要计算。这里，伪元素构成的十字架应在元素的中间。本来，它们如果大小一样，它们是重叠在一起的，但现在各自的尺寸不同，就需要移位，移位的时候要将元素的尺寸、自身的尺寸等综合考虑在内，如果几何思维不好，则需要慢慢去尝试、体会，我这里仅说一下道理。 红影 发表于 2022-2-19 21:00
这些为什么回答不了，这是为什么呢？
③ 元素和伪元素能不能不设定定位；
不能。只要存在位移操作，总是需要设定position，犹如嵌套的元素即父子元素的道理。实际上，元素和伪元素也是宽泛意义上的父子元素，毕竟伪元素是从元素中派生出来的。 小辣椒 发表于 2022-2-19 22:22
感觉这个有难度，不能一下子掌握的
④ 为什么动画放在伪元素中而不是放在元素里？
其实 animation 放在元素中更好控制，尤其是需要JS来控制动画——JS不好操作伪元素，但这意味着排气扇的外壳也是转动的，想一想外壳是四方的是什么情形？
所以，做一个风扇类的物件，最好用两个元素，动画的部分是一个整体，元素和伪元素一同动，JS只需要去控制元素便可，另一个元素做外壳之类的 马黑黑 发表于 2022-2-20 10:45
③ 元素和伪元素能不能不设定定位；
不能。只要存在位移操作，总是需要设定position，犹如嵌套的元素 ...
“实际上，元素和伪元素也是宽泛意义上的父子元素，毕竟伪元素是从元素中派生出来的。”
嗯嗯，记下了{:4_187:} 马黑黑 发表于 2022-2-20 10:51
④ 为什么动画放在伪元素中而不是放在元素里？
其实 animation 放在元素中更好控制，尤其是需要JS来控 ...
黑黑这么一解释似乎懂了一点，但感觉这个我一下子不会操作或者说不会制作 马黑黑 发表于 2022-2-20 10:42
② 伪元素偏移尺寸的依据；
偏移位置需要计算。这里，伪元素构成的十字架应在元素的中间。本来，它们 ...
学习了，黑黑到底是教授级别的，指导学生有一套{:4_173:} 马黑黑 发表于 2022-2-20 10:34
① 元素和伪元素的各自形态：
元素div，背景色是透明的，它的形态由border来呈现：border的尺寸以及形 ...
听黑黑这么讲感觉有道理的，也是应该这样制作，但实践自己制作的时候总是不能有理想的效果出来，就是播放器移动位置都有时候不会成功，在代码里面想添加其他的东西进去，老是出错，黑黑我喜欢瞎捣鼓，真感觉这个我瞎不来，一定要按正规的来操作，这个我好像离正规的代码操作有很大距离{:4_203:} 看讨论，去理解。 小辣椒 发表于 2022-2-20 13:41
听黑黑这么讲感觉有道理的，也是应该这样制作，但实践自己制作的时候总是不能有理想的效果出来，就是播放 ...
那个播放器，定位是容易的：根据你帖子的主窗体的尺寸来定位播放器的外框 小辣椒 发表于 2022-2-20 13:33
学习了，黑黑到底是教授级别的，指导学生有一套
和老头比，小巫见大巫{:5_117:}
页:
[1]
2