文章目录
1,css动画
1，动画原理及2D变换
transform: 变换，用于描述物体的位置旋转缩放
translate: 平移
rotate 旋转 参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180° 沿轴进行顺时针旋转为正方向，0°代表竖直向上
scale 缩放 参数：比率 1 为原本大小
skew 倾斜
设置transform的原点:transform-origin
2，过渡动画
transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态,当中应该包含
定义初始状态
指定css属性能够产生过度动画
动画播放的时长
动画播放的速度曲线
动画播放延迟
3，3d变换和animation动画
1，animation动画
动画animation必须包含 名称和时长两个属性才会进行播放
/* animation一下四个属性可以和 tansition一块儿进行记忆 */
/* 动画名称 */
animation-name: move;
/* 动画播放时长 */
animation-duration: 3s;
/* 动画播放的速度曲线 */
animation-timing-function: linear;
/* 动画延迟 */
/* animation-delay: 3s; */
/* 以下属性为 animation 独有的属性 */
/* 动画的迭代次数
infinite 无限次
*/
animation-iteration-count: 1;
/* 动画播放方向
待选项:
normal: 顺向播放
reverse: 反向播放
alternate: 来回播放
alternate-reverse: 反向来回播放
*/
animation-direction: normal;
/* 动画填充模式（动画播放结束后所保留的状态）
forwards: 保留结束帧的状态
backwards: 保留起始帧的状态
both: 保留初始和结束时的状态
*/
animation-fill-mode: both;
/* 可以定义复合属性，取代上面的所有属性 */
/* 赋值顺序，可以参考如下顺序 */
/* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
/* duration | timing-function | delay | name */
/* duration | name */
/* animation: 2s move;
animation: 2s linear 3s move; */
animation: move 3s linear 2s forwards;
}
/* 动画帧序列 */
@keyframes move {
/* 起始帧 */
from {
/* 每一帧中描述该元素的状态 */
transform: translateX(0px);
opacity: 0;
}
/* 可以用百分比来代表动画的中间状态 */
50% {
transform: translateX(600px);
opacity: 1;
}
/* 结束帧 */
to {
transform: translateX(300px);
}
}
// animationPlayState 动画播放状态
// paused 暂停
// running 播放
2，3d变换
.scene {
height: 100vh;
/* 变换样式
perserve-3d 代表将元素变成一个3D空间
*/
transform-style: preserve-3d;
/* 灭点到屏幕的距离 */
/* 若三维场景中不添加 perspective 则三维场景是一个正交视图 */
perspective: 300px;
/* 透视原点（灭点所在的坐标）
原点为 0 值时，所在位置是scene的左上角
*/
/* perspective-origin: center center; */
perspective-origin: 0 0;
}
3d变换 是让我们的元素看上去在三维空间中发生变换（平移 旋转 缩放 倾斜）
总结：
要使用3d变换需要依序执行以下步骤：
1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;
2. 在父元素上设置透视距离：perspective: 100px;
3. 给场景添加演员，给场景元素添加子元素
4. 在子元素上使用3d变换
4，渐变色分栏布局与响应式
1，渐变色
/* 背景的渐变色实际上是设置的 background-image 而不是 background-color */
/* 线性渐变 */
/* 语法: linear-gradient(direction, color1, color2, color3 ... )
direction: 渐变色的朝向 以 to 开头, 或者可以添加角度值; 默认值为 to top
color1 color2 ...: 渐变的颜色序列
*/
background-image: linear-gradient(30deg, #f00, #0f0, #00f);
/* 颜色值后可以添加像素距离，该像素值代表着该颜色所处的位置，该位置颜色将到下一个位置的颜色之间进行渐变 */
background-image: linear-gradient(to right, #f00, #f00 50px, #0f0 50px, #0f0 100px, #00f 200px);
/* 重复线性渐变 */
background-image: repeating-linear-gradient(to right, #f00, #f00 50px, #00f 50px, #00f 100px);
/* 径向渐变 */
background-image: radial-gradient(#f00, orange, #0f0, #ff0, #f0f);
background-image: radial-gradient(#f00, #f00 50px, #00f 50px, #00f 100px, #0f0 100px, #0f0 200px);
/* 重复径向渐变 */
background-image: repeating-radial-gradient(#f00, #f00 50px, #ff0 50px, #ff0 100px);
2，响应式布局
/* 响应式是什么？
当某个事情发生后，立即做出反应就叫响应式
此处我们讨论的是页面的响应式
*/
/* 什么是页面的响应式？
页面的元素样式会根据页面的宽度做出变化
*/
/* 为什么要使用页面响应式
为了让同一个页面能够适配不同的设备
*/
/* 如何实现响应式？ */
/* 使用媒体查询，来实现响应式布局 */
/* 媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式 */
/* 语法：@media media-type and (condition1) and (condition2) ... */
/* 媒体类型 media-type：
备选项
all: 所有设备
print：打印机的预览模式
screen：显示屏
speech：语音合成器
*/
/* min-width: 屏幕最小宽度 */
/* max-width: 屏幕最大宽度 */
@media screen and (min-width: 600px) and (max-width: 900px) {
.box {
background-color: orange !important;
}
}
@media screen and (min-width: 900px) {
.sidebar {
display: block !important;
}
}
@media screen and (max-width: 900px) {
.sidebar-mini {
display: block !important;
}
}
2,jquery
使用 $() 函数获取一个 jQuery 对象
eq 读取对应索引位置的jquery对象
get 读取对应索引位置的dom对象
// 某个元素追加一个子节点
// $(document.body).append($box)
// 追加一个子节点到另一个元素中
// $box.appendTo($(document.body))
// 某个元素追加一个节点到头部
// $(document.body).prepend($box)
// 追加一个子节点到另一个元素的头部
// $box.prependTo($(document.body))
// 某个元素的前面追加一个元素
// $box2.before($box)
// 某个元素被添加到另一个元素的前面
// $box.insertBefore($box2)
// 某个元素的后面添加一个元素
// $box2.after($box)
// 某个元素被添加到另一个元素的后面
// $box.insertAfter($box2)
index 遍历的数组成员的索引
value 对应索引元素的样式值
// 添加类
$box.addClass('active')
// 判断是否存在某个类名
$box.hasClass('active')
// 删除类
$box.removeClass('active')
// 读取属性
let clazz = $box.attr('class')
console.log(clazz);
// 赋值属性
$box.attr('my-data', 'hello world')
// 删除属性
$box.removeAttr('class')
// 相当于dom对象的innerText
$p.text('<span style="color: red">hello</span> world')
// 相当于dom对象的innerHTML
$p.html('<span style="color: red">hello</span> world')
3,canvas画布
使用canvas的步骤
1. 创建canvas标签
2. 给canvas标签设置 width height 属性
3. 通过js 获取canvas标签
4. 通过canvas标签获取context画布上下文（画布对象）
5. 通过context绘制画布
// 绘制实心矩形(rectangle)
// ctx.fillRect(x, y, w, h)
// x: 水平坐标
// y: 竖直坐标
// 坐标原点在canvas左上角
// w: 宽度
// 绘制实心文字
// 语法：ctx.fillText(text, x, y, max-width)
// text: 要渲染的文本
// x,y: 文本渲染的坐标位置
// max-width: 文本最大宽度，当大于该宽度，文本字体将自动缩小以自适应宽度
// ctx.fillText('祖国万岁!!', 200, 100, 100)
// 设置颜色和线宽
ctx.strokeStyle = '#ff0'
ctx.lineWidth = 15
// 画线分两个步骤:
// 1. 描点（设置路径）
// 2. 画线（将所描的点连接起来）
// 步骤一
// 使用 beginPath 开启路径
ctx.beginPath()
// 移动笔头但不会记录路径上的线条
ctx.moveTo(400, 100)
// 用线绘制到下一个点
ctx.lineTo(200, 200)
ctx.lineTo(600, 200)
ctx.lineTo(400, 100)
// 将路径封闭
ctx.closePath()
// 步骤二
// 为了显示图形需要调用以下函数
// 将路径所包围的图形用纯色来填充
// ctx.fill()
// 将路径用镂空线条进行绘制
ctx.stroke()
绘制图片
// 语法:
// ctx.drawImage(image, dx, dy);
// ctx.drawImage(image, dx, dy, dWidth, dHeight);
// ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
// image: img 标签的 dom 对象
// dx dy: 图片在canvas中的坐标
// dWidth dHeight: 图片在canvas中的宽高
// sx, sy: 参考图片源，截图的坐标
// sWidth, sHeight: 截图的宽高
4,多媒体标签
属性
width 标签宽度
height 标签高度
controls 控制面板
muted 静音
autoplay 自动播放
src 媒体源
preload 预载模式
loop 循环
poster 海报
详细讲解在我的上一篇博客这里传送门
5,微信小程序
微信小程序和前端学习差不多，差别不大
1，基础
1，底部选项卡
在 app.json 中 增加 tabBar 配置就能添加选项卡
{
"tabBar": {
"selectedColor": "#444", // 选中的按钮的文本颜色
"list": [ // 按钮列表
{
"pagePath": "pages/read/read", // 跳转的页面路径
"text": "领读", // 按钮的文字描述
"iconPath": "image/tab_icon1.png", // 未
最低0.47元/天 解锁文章
3769
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
