简单的代码但需要去领悟

马黑黑

这里，给一个简单的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>

红影

去看了一下，像电风扇一样

红影

这些为什么回答不了，这是为什么呢？

小辣椒

这个不懂呢，只会复制后预览一下效果

小辣椒

黑黑现在是越来越难了，小辣椒先去百度一下

小辣椒

图片不上传上来了


度娘的

总结：伪元素其实相当于伪造了一个元素，例如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，犹如嵌套的元素 ...

“实际上，元素和伪元素也是宽泛意义上的父子元素，毕竟伪元素是从元素中派生出来的。”
嗯嗯，记下了

小辣椒

马黑黑 发表于 2022-2-20 10:51
④ 为什么动画放在伪元素中而不是放在元素里？

其实 animation 放在元素中更好控制，尤其是需要JS来控 ...

黑黑这么一解释似乎懂了一点，但感觉这个我一下子不会操作或者说不会制作

小辣椒

马黑黑 发表于 2022-2-20 10:42
② 伪元素偏移尺寸的依据；

偏移位置需要计算。这里，伪元素构成的十字架应在元素的中间。本来，它们 ...

学习了，黑黑到底是教授级别的，指导学生有一套

小辣椒

马黑黑 发表于 2022-2-20 10:34
① 元素和伪元素的各自形态：

元素div，背景色是透明的，它的形态由border来呈现：border的尺寸以及形 ...

听黑黑这么讲感觉有道理的，也是应该这样制作，但实践自己制作的时候总是不能有理想的效果出来，就是播放器移动位置都有时候不会成功，在代码里面想添加其他的东西进去，老是出错，黑黑我喜欢瞎捣鼓，真感觉这个我瞎不来，一定要按正规的来操作，这个我好像离正规的代码操作有很大距离

加林森

看讨论，去理解。

马黑黑

小辣椒 发表于 2022-2-20 13:41
听黑黑这么讲感觉有道理的，也是应该这样制作，但实践自己制作的时候总是不能有理想的效果出来，就是播放 ...

那个播放器，定位是容易的：根据你帖子的主窗体的尺寸来定位播放器的外框

马黑黑

小辣椒 发表于 2022-2-20 13:33
学习了，黑黑到底是教授级别的，指导学生有一套

和老头比，小巫见大巫