使用 CSS Houdini API 的 @property 去定义 指定类型的 CSS变量；
通过 conic-gradient 渐变并搭配 @keyframes 中配置数值变化就可以在动画中实现数值方向的过渡。
使用传统方式定义css的角度无法实现数值的过渡
金色流光边框
发表评论
3D效果实现
补充前置知识：CSS transform 3D位移与旋转
rotateX(180deg) 上下旋转
rotateY(180deg) 左右旋转
rotateZ(180deg) 自己旋转
rotate3d(1,1,0,180deg) 自定义旋转
translateZ(30px) Z轴移动（前后）
完整的3D正方体
前
后
右
左
上
下
flex布局演示
针对 CSS的Flex布局(弹性盒子) 内容的补充
继续阅读制作三角形
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
效果展示
函数解释
MDN描述：window.requestAnimationFrame() 告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
继续阅读磨砂效果的框框
【测试】康康好康的视频
通过对象存储COS获取的视频，设置了防盗链的操作：
- 好处：流量跑的不是网站，因此不会加大网站本身的负担
- 坏处：某些场景确实挺烧钱、而且很怕盗刷跑流量，真的很心疼…
顺便一提，理论上你们只能看不能下
GKD! 还不快点击进来看看非洲的视频
继续阅读美妙的 gird 布局
效果如下：
继续阅读JavaScript 中 new 的含义
new 是实例化 类 的操作。针对定义与使用，有以下操作
继续阅读vertical-align 行内元素与文字对齐方式
该属性用来指定行内元素 (inline) 或表格单元格 (table-cell) 元素的垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式
vertical-align 样式演示
|
|
无名喵站
|