论坛 - 如何通过CSS整些有趣的东西
论坛 » Imported » 单页讨论 » 如何通过CSS整些有趣的东西
创建者: wd:yuyi_ad wd:yuyi_ad
日期:12.30.2023 11:18 (UTC)
帖子数:3
此主题为页面 如何通过CSS整些有趣的东西 的讨论区
作者贴
wd:yuyi_ad wd:yuyi_ad 12.30.2023 11:21 (UTC)

因为看见站内没有有关CSS的指导或议论,所以我一气之下写出了这坨答辩

随便写的,总耗时不超过6个小时。

wd:Mirror hands wd:Mirror hands 12.31.2023 00:38 (UTC)

好文,但是可以只用animation一个声明,后面直接用空格把值隔开就行了。


另外什么时候搞一下类似生存难度组件里面[*class-*x]的那个玩意,b站搜不到(

wd:yuyi_ad wd:yuyi_ad 12.31.2023 01:50 (UTC)

有没有一种可能性,我说了animation 是所有动画属性的简写。

另外“[*class-*x]”这个玩意就是CSS 分组选择器,作者把所有带有“class-”前缀的类名划成了同一组,并给予了它们相同的数值。


有时间的话,我大概会再写一个介绍CSS 分组选择器的文章

H_W H_W 12.31.2023 11:58 (UTC)

蚌不住了竟然是我组件)

通过 transform 将整个元素向 X轴 的方向旋转-1rem,并设置为诱明,在结束时设置成不透明,并不再旋转

我记得我写的是移动来着

套姓CSS 分组选择器


层级等级系统动画组件并没有添加 header-diamond 的动画

因为它原本组件有问题,貌似添加动画后会出现问题(反正我当时做的是这样)

啊?
wd:yuyi_ad wd:yuyi_ad 12.31.2023 15:43 (UTC)

可问题是我翻原代码的时候不就是 transform 吗?transform 不是用来 3D转换和2D转换的吗?难道是我理解错了还是怎么了……


所谓的套娃是为了让不懂CSS的人更容易理解,实际表现也就下面这样……

.类1 .类2{值1;值2;}

类2只有被包裹在类1中,值1与值2这两个声明才会产生作用,而正好生存难度组件的源代码就有……

.sd-container[class*="{"]

这个玩意……虽然我不知道这到底是个什么玩意,但 [class*="{"] 大概……应该是CSS 分组选择器吧?而在 [class*="{"] 前面则是类名 sd-container 所以我写的就是“套姓CSS 分组选择器”

另外……我承认我的表达可能不太清楚,但是你指望能从我6个小时不到写出来的一篇争对新手的议论中找出一些十分专业性的内容出来……我介意你去看专业的CSS教程……


你与其指望我能从一个起码上万字的组件之中找到一处代码错误,还不如信我是秦始皇

大概是因为 header-diamond 中的 -webkit-mask 或者 position 这俩导致的代码错误,使得动画并不生效。


改了

Re: 啊?
H_W H_W 01.03.2024 10:19 (UTC)

transform是用来定义他是用来变化的,他的效果由transform:后面的东西定义
比如旋转是transform:rotate(deg);,而我写的是translateX(-1rem);,用来让它在X轴上移动


你写的是套


那个貌似是Wikidot语法里自带的,反正我也不知道


只能说写的东西过于繁杂,有很多东西没必要列举,比如animation-timing-function之类的

Re: 啊?
wd:simon laau wd:simon laau 02.02.2024 02:26 (UTC)

.sd-container[class*="{"]
指的大概是一个class="sd-container"并且还带了{符号的(比如sd-container{$class})

但我翻了下源代码似乎没有这东西

_default: 管理 论坛
页面版本:2,最后编辑:2023年2月1日 02:47(UTC)
除非特别注明,本页内容采用以下授权方式:Creative Commons Attribution-ShareAlike 3.0 License