效果展示
函数解释
MDN描述：window.requestAnimationFrame() 告诉浏览器你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
继续阅读请求动画帧 requestAnimationFrame
1条回复
磨砂效果的框框
【测试】康康好康的视频
通过对象存储COS获取的视频，设置了防盗链的操作：
- 好处：流量跑的不是网站，因此不会加大网站本身的负担
- 坏处：某些场景确实挺烧钱、而且很怕盗刷跑流量，真的很心疼…
顺便一提，理论上你们只能看不能下
GKD! 还不快点击进来看看非洲的视频
继续阅读美妙的 gird 布局
效果如下：
继续阅读JavaScript 中 new 的含义
new 是实例化 类 的操作。针对定义与使用，有以下操作
继续阅读vertical-align 行内元素与文字对齐方式
该属性用来指定行内元素 (inline) 或表格单元格 (table-cell) 元素的垂直对齐方式
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式
vertical-align 样式演示
|
|
无名喵站
|
<mate> 视口标签
视口的简介
视口就是浏览器显示页面内容的屏幕区域
- 下方作为一个定义完整视口标签属性的方式，适配用户设备宽度，并禁止用户缩放
HTML
<meta name="viewport" content="width=device-width,
initial-scale=1.0,maximun-scale=1.0,minimun-scale=1.0">标准的 viewport 设置
- 视口宽度和设备保持一致
- 视口默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
js class类
与构造函数类似，但是规定了额外的效果，如继承、多态、封装
传统的 JS 只有 对象 的概念，没有class类的概念，因为 JS 是基于原型的面向对象语言，原型对象特点就是将属性全部共享给新对象
但 ES6 引入了 class 类这个概念，通过 class 关键字可以定义类，这就是更符合我们平时所理解的面向对象的语言
class Person{ // 定义一个名为Person的类
// 构造函数，用来接受参数
constructor(x,y){
this.x = x; // this代表的是实例对象
this.y = y;
}
todoSome(){ // 这是个类的方法，不需要加function，有多个方法也不用逗号隔开
alert(this.x + “的年龄是” +this.y+”岁”);
}
}
CSS transform 3D位移与旋转
3D移动 在 2D移动 的基础上多加了一个可移动方向，即Z轴方向
- 3D位移 translate3d(x,y,z);
- 3D旋转 rotate3d(xyz);
- 透视 perspective
- 3D呈现 transfrom-style
向上转
向左转
自定义
在2D平面产生近大远小视觉立体，但是只是效果二维的
透视我们也称为视距，视距就是人的研究到屏幕的距离。越近物体越大；越远物体越小
perspective 可设置透视 （译为视距）
// 当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身
// 注意：perspective 属性只影响 3D 转换元素；单位为 px ，越小表示视距位置越近
perspective 的该CSS属性需附加给父级(单位为px)，以便子元素3D转换时呈现透视效果(转换时远近效果)。
因此：要想呈现较好的3D效果，首先父级得拥有透视 perspective 属性，
另：若需要子元素拥有3维立体空间。需要给父级 添加 transform-style:preserve-3d
CSS 动画
CSS可设置元素更多的动画效果
步骤1 @keyframes 定义动画样式 和 名称
// 顺序可用from {} to {} 或 百分比 0%{} 100%{}
@keyframes move {
/* 初始位置 */
0% {
transform: translateX(0px);
}
/* 基于初始位置向右移动500px */
100% {
transform: translateX(500px);
}
}
步骤2 animation-name 引入动画样式
/* 引入该动画:动画名称 */ animation-name: move;
步骤3 animation-duration 设置动画播放时间
/* 持续时间 5s */ animation-duration: 5s;继续阅读