周子雷 -西亚风光

马黑黑

红影 发表于 2024-7-1 09:37
里面交叉重复线性渐变，用5%的取值和边框的thick double很相配。

有几个地方没看明白，为什么 ...

关于居中：背景图像（渐变被视为图像）的设置简写语句中，

background: linear-gradient(...) repeat position / size;

斜杠部分，坐标是背景的位置，右边是背景的尺寸。

repeat 则是规定颜色的渐变方向，repeat-x 表示按水平方向渐变，repeat-y 表示按垂直方向渐变。

伪元素使用的背景渐变是继承父元素的（background: inherit;），它与父元素重叠在一起，旋转45deg后刚好和父元素共同构建米字型。详情请看我做的动画演示。

马黑黑

南无月 发表于 2024-7-1 12:45
美丽的风光，这个转轮跟方向盘似的，保持平衡，
中间条纹还有动态，漂亮。。。。
鼠标触碰小播出现影子， ...

是西亚的方向盘

马黑黑

醉美水芙蓉 发表于 2024-7-1 17:26
手机观看完美！播放器按钮跟红影说的一样暂停有重影！

这是特意设计出来的效果。手机点击按钮后，在页面别处再轻点一下就会恢复

南无月

马黑黑 发表于 2024-7-1 15:42
是西亚的方向盘

西亚的方向盘挺稳

南无月

马黑黑 发表于 2024-7-1 15:15
这是定义 id="papa" 元素下的第一个 class="vid" 的元素在全屏状态下它的高度

以后碰上全屏错位的视频可以这么处理了。。老师又传授一个非常实用的方法

南无月

马黑黑 发表于 2024-7-1 15:14
实际上它，除了CSS相关代码偏多，并不复杂，它只是利用了两样东东：多重渐变背景、伪元素。

如果愿意 ...

好哒~~这个背景当然还可以是方的或者椭圆的。。
这两个伪元素加上去之后变化多端，
效果跟做了机器零件，再进行组装似的，
看着十分完美

马黑黑

南无月 发表于 2024-7-1 18:13
好哒~~这个背景当然还可以是方的或者椭圆的。。
这两个伪元素加上去之后变化多端，
效果跟做了机器零件 ...

反正有一定的可玩性

马黑黑

南无月 发表于 2024-7-1 18:10
以后碰上全屏错位的视频可以这么处理了。。老师又传授一个非常实用的方法

其实也是个折中的法子而已，好的做法是计算视口尺寸，按比例调整待调整对象

马黑黑

南无月 发表于 2024-7-1 18:09
西亚的方向盘挺稳

还行的

绿叶清舟

代码做的轮子啊，看到加了又加就晕了

马黑黑

绿叶清舟 发表于 2024-7-1 20:09
代码做的轮子啊，看到加了又加就晕了

晕晕更快乐

绿叶清舟

马黑黑 发表于 2024-7-1 20:09
晕晕更快乐

晕了还怎么快乐啊

南无月

马黑黑 发表于 2024-7-1 19:19
还行的

一路风光独好，兜风去啦

南无月

马黑黑 发表于 2024-7-1 19:19
其实也是个折中的法子而已，好的做法是计算视口尺寸，按比例调整待调整对象

有效果的就是好法子。
这个法子比较接地气儿。。随手就能用
按比例计算么，又是函数的事儿了吧

南无月

马黑黑 发表于 2024-7-1 19:18
反正有一定的可玩性

老师创造的小工具们总是有无限可能。。变化莫测。。

小辣椒

就刚才看见的那个小播，已经实例出来了，效果大气磅礴，二个视频进去，出来的效果真的酷啊，等一下我去手机看看，很喜欢的效果

红影

马黑黑 发表于 2024-7-1 15:27
额

只要不点击，鼠标移动开后还继续转动。

红影

马黑黑 发表于 2024-7-1 15:29
估算，测试，调整

辛苦，这个调的很到位。