移动互联应用总结

最新推荐文章于 2024-11-05 15:31:54 发布

是侯不是候.

最新推荐文章于 2024-11-05 15:31:54 发布

阅读量276

点赞数 1

文章标签：前端动画 html

本文链接：https://blog.csdn.net/m0_52563745/article/details/126767730

版权

transform2D变换

平移 transform

transform: translate(xpx,ypx)

第一个参数水平平移量右为正方向

第二个参数竖直平移量下为正方向

旋转 rotate

transform:rotate(xdeg)

参数：可以是角度值 (deg) 也可以是弧度值 (rad) 弧度制的PI = 180° */

沿轴进行顺时针旋转为正方向，0°代表竖直向上

缩放 scale

transform: scale(x)

参数：比率 1 为原本大小

scale 写负数代表反向

倾斜 skew

transform: skew(xdeg)

参数为角度

transition过渡动画

概念：transition是过渡的意思，将会使元素从一个状态用动画形式过渡到另一个状态

属性：

transition-property: 指定css属性能够产生过度动画
transition-duration 动画播放的时长
transition-timing-function 动画播放的速度曲线，属性值有linear：匀速直线运动、ease-in: 慢进、ease-out: 慢出
transition-delay 动画播放延迟

简写属性：transition: property duration timing-function delay

animation动画

注意：animation动画必须包含名称和时长两个属性才会进行播放

属性：

animation-name 动画名称
animation-duration 动画播放时长
animation-timing-function 动画播放的速度曲线，属性值和transition一样
animation-iteration-count 动画的迭代次数，属性值可以是任意次数，infinite 表示无限次
animation-direction 动画播放方向，属性值normal: 顺向播放、reverse: 反向播放、alternate: 来回播放、alternate-reverse: 反向来回播放
animation-fill-mode: both 动画填充模式（动画播放结束后所保留的状态），属性值forwards: 保留结束帧的状态、backwards: 保留起始帧的状态、both: 保留初始和结束时的状态

animation动画必须设置一个关键帧，关键字设置了动画执行的每一个步骤，每一个画面，如下

@keyframes 动画名{

from {

css样式属性

}

to {

css样式属性

}

注意：除了使用from 和 to 还可以将整个动画流程看成是100%进度

3D变换

概念：使元素看上去在三维空间中发生变换（平移旋转缩放倾斜）

要使用3d变换需要依序执行以下步骤：

1. 搭建3d场景，在父元素上设置：transform-style: preserve-3d;

2. 在父元素上设置透视距离：perspective: 100px;

3. 给场景添加演员，给场景元素添加子元素

4. 在子元素上使用3d变换

响应式布局

响应式是什么？当某个事情发生后，立即做出反应就叫响应式
什么是页面的响应式？页面的元素样式会根据页面的宽度做出变化
为什么要使用页面响应式？为了让同一个页面能够适配不同的设备
如何实现响应式？使用媒体查询，来实现响应式布局
媒体查询的作用：当媒体查询条件成立时，将应用花括号中代码块的样式

语法： @media media-type and (condition1) and (condition2）......

媒体类型 media-type：

备选项

all: 所有设备

print：打印机的预览模式

screen：显示屏

speech：语音合成器

jQuery

概念：使用jquery $() 函数查询出来的返回值就是一个jquery 对象

获取jquery对象的方法有两种：

1. 使用 css 选择器

2. 使用 dom 对象

eq（）和get（）的区别：

eq（）读取对应索引位置的jquery对象。

get（）读取对应索引位置的dom对象，使用 [] 方括号的方式去获取索引对应的 dom 对象

创建并插入元素

 // 创建一个节点，该节点就是一个jquery对象
    let $box = $(`<div class="box">new</div>`)

    // 某个元素追加一个子节点
    // $(document.body).append($box)

    // 追加一个子节点到另一个元素中
    // $box.appendTo($(document.body))

    // 某个元素追加一个节点到头部
    // $(document.body).prepend($box)

    // 追加一个子节点到另一个元素的头部
    // $box.prependTo($(document.body))

    let $box2 = $('.box').eq(1)

    // 某个元素的前面追加一个元素
    // $box2.before($box)

    // 某个元素被添加到另一个元素的前面
    // $box.insertBefore($box2)

    // 某个元素的后面添加一个元素
    // $box2.after($box)

    // 某个元素被添加到另一个元素的后面
    $box.insertAfter($box2)