红影 发表于 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
是西亚的方向盘
西亚的方向盘挺稳{:4_173:}
马黑黑 发表于 2024-7-1 15:15
这是定义 id="papa" 元素下的第一个 class="vid" 的元素在全屏状态下它的高度
以后碰上全屏错位的视频可以这么处理了。。老师又传授一个非常实用的方法
马黑黑 发表于 2024-7-1 15:14
实际上它，除了CSS相关代码偏多，并不复杂，它只是利用了两样东东：多重渐变背景、伪元素。
如果愿意 ...
好哒~~这个背景当然还可以是方的或者椭圆的。。
这两个伪元素加上去之后变化多端，
效果跟做了机器零件，再进行组装似的，
看着十分完美{:4_173:}
南无月 发表于 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
还行的
一路风光独好，兜风去啦{:4_173:}
马黑黑 发表于 2024-7-1 19:19
其实也是个折中的法子而已，好的做法是计算视口尺寸，按比例调整待调整对象
有效果的就是好法子。
这个法子比较接地气儿。。随手就能用
按比例计算么，{:4_170:}又是函数的事儿了吧
马黑黑 发表于 2024-7-1 19:18
反正有一定的可玩性
老师创造的小工具们总是有无限可能。。变化莫测。。{:4_199:}
就刚才看见的那个小播，已经实例出来了，效果大气磅礴，二个视频进去，出来的效果真的酷啊，等一下我去手机看看，很喜欢的效果
马黑黑 发表于 2024-7-1 15:27
额
只要不点击，鼠标移动开后还继续转动。
马黑黑 发表于 2024-7-1 15:29
估算，测试，调整
辛苦，这个调的很到位。