金色流光边框

发表评论

使用 CSS Houdini 的 CSS Properties and Values API，通过 @property 注册一个具有 <angle> 类型的 CSS 自定义属性；再将该属性用于 conic-gradient()，并在 @keyframes 中改变它的角度值，就可以实现渐变角度的平滑插值动画

如果使用未通过 @property 注册的普通 CSS 自定义属性，浏览器无法识别其具体值类型，因此在动画过程中通常不能进行角度值插值，只会离散切换。

%title插图%num
继续阅读 →

3D效果实现

发表评论

补充前置知识：CSS transform 3D位移与旋转

rotateX(180deg) 上下旋转

rotateY(180deg) 左右旋转

rotateZ(180deg) 自己旋转

rotate3d(1,1,0,180deg) 自定义旋转

translateZ(30px) Z轴移动（前后）

完整的3D正方体

前
后
右
左
上
下

制作三角形

发表评论

border 边框的边缘之间，效果是切割彼此一半

.smm-box { width: 100px; height: 100px; border: 10px solid transparent; border-top-color: red; border-left-color: aqua; border-bottom-color: blueviolet; border-right-color: aquamarine; }

当不没有内容的宽高的时候，效果如下

.smm-box2 { width: 0; height: 0; border: 60px solid transparent; border-top-color: red; border-left-color: aqua; border-bottom-color: blueviolet; border-right-color: aquamarine; }

将其他边框设置为透明色，得到一个三角形

.smm-box3 { width: 0; height: 0; border: 60px solid transparent; border-left-color: aqua; }

请求动画帧 requestAnimationFrame

1条回复

效果展示

函数解释

MDN描述：window.requestAnimationFrame() 告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

CSDN相关文档、CSDN相关文档

继续阅读 →

磨砂效果的框框

发表评论
HTML

为了实现磨砂效果，我们可以使用下方所示的关键代码来制作。

CSS
div {
 background: inherit;
 backdrop-filter: blur(2px);
}
继续阅读 →

【测试】康康好康的视频

2条回复

通过对象存储COS获取的视频，设置了防盗链的操作：

  • 好处：流量跑的不是网站，因此不会加大网站本身的负担
  • 坏处：某些场景确实挺烧钱、而且很怕盗刷跑流量，真的很心疼…

顺便一提，理论上你们只能看不能下

GKD! 还不快点击进来看看非洲的视频

继续阅读 →

美妙的 gird 布局

发表评论

效果如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

继续阅读 →

vertical-align 行内元素与文字对齐方式

发表评论
该属性用来指定行内元素 (inline) 或表格单元格 (table-cell) 元素的垂直对齐方式

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式

vertical-align 样式演示

  • baseline
  • sub
  • super
  • top
  • middle
  • bottom
    		•
    无名喵站
    继续阅读 →