Web移动端第三天

微风抚少年
224 阅读9分钟

Web移动端第三天

动画

使用步骤

1.定义动画

@keyframes （关键针） 动画名称（英文） ani_1{

from{}

​ to{}

​ 或者

​ 0%{}

​ 30%{}

​ 50%{}

​ 100%{}

}

@keyframes ani_1 {
               from{
 					/* 变成红色 */
                   background-color: red;
               }
               to{
					/* 变成粉色，并且宽高变为500px，拥有圆角 */
                   background-color: pink;
                   width: 500px;
                   height: 500px;
                   border-radius: 50%;
               }

2.使用动画

animation: 动画名称 动画花费时长; 要哪个元素实现动画就在哪个元素里面加

div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 200px auto;
            /* 2.使用动画 */
            /* animation: 动画名称  动画花费时长;    要哪个元素实现动画就在哪个元素里面加 */
            animation: ani_1 5s;
        }

动画复合属性

  1. 动画名称animation-name

  2. 动画时长animation-duration

  3. 动画延迟播放时间animation-delay

  4. 动画正常播放之外的状态(延迟、播放结束)animation-fill-mode

    在延迟时间内

    1. 显示的是自身属性
    2. 设置在延迟时间内显示第一帧(0%)的画面backwards
    3. 整个动画播放完了动画画面是回到自身属性的页面上
    4. 设置动画 播放完毕了停留在最后一帧的画面forwards
    5. both同时设置了backwards和forwards

  5. 设置动画播放次数animation-iteration-count(infinite无数次)

  6. 设置动画播放方向animation-direction

    1. 默认值normal 先正再正 (常用)
    2. alternate 先正再反 (常用)
    3. reverse 先反再反
    4. alternate-reverse 先反在正

    7.动画速度曲线

    1. 匀速运动linear

    2. 先慢后快在慢ease(默认)

    3. 慢速开始ease-in

    4. 慢速结束ease-out

    5. 慢速开始和结束ease-in-out

    6. 帧数steps(int,start|end)

    7. 制定了函数中的间隔数量(步长)。

      1. 第一个参数是指定函数的间隔数，该参数是一个正整数(大于0)

    8. 第二个参数可选，表示动画是从时间段的开头连续还是末尾连续

      1. start：表示直接开始
      2. end：默认值，表示嘎然而止
      3. 实用技巧
      4. ul是多宽设置位移多宽 2. 你要分几步写几
      5. 不要写上forwards 4. 加上无线循环

    div{ width: 140px; height: 140px; /* border: 1px solid #000; / background: url("./images/bg.png"); / 有几个图片steps就设置多少 / / 可以同时设置多个动画,用逗号隔开 / animation: ani 1s steps(12) infinite,ani2 4s forwards; } @keyframes ani { 100%{ / 图片有多长就设置多长 */ background-position-x: -1680px; } } @keyframes ani2 { 100%{ transform: translateX(600px); } }

    


### 拓展

设置动画

​      暂停 paused

​      播放 running(默认  如果要先暂停鼠标移上去播放的话在上面元素添加		animation-play-state: paused;

​      然后再在hover状态添加animation-play-state: running;)

### 注意

1. 动画必须要有两个属性 动画名称(name)、动画时长(duration)
2. 其他属性看需求来添加
3. 简写不分先后顺序
1. 播放时间一定要写在延迟时间前面！！！！

1647483204023.png

div{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 200px auto;
            text-align: center;
            line-height: 300px;
            /* 动画简写 */
            /* animation: ani_1 5s; */
            /* 动画名称 */
            animation-name: ani_1;
            /* 动画时间 */
            animation-duration: 5s;
            /* 动画延迟时间 */
            /* animation-delay: 2s; */
            /* 动画正常播放之外的状态(延迟、播放结束) 
                在延迟时间内
                    1.显示的是自身属性
                    2.设置在延迟时间内显示第一帧(0%)的画面 backwards
                    3.整个动画播放完了动画画面是回到自身属性的页面上
                    4.设置动画 播放完毕了停留在最后一帧的画面forwards
                    5.both同时设置了backwards和forwards
            */
            /* animation-fill-mode: backwards; */
            /* 设置动画播放次数
                infinite无数次
            */
            animation-iteration-count: infinite;
        }

轮播图无缝滚动技巧

  1. 两个大盒子
    1. 外层盒子设置眼睛看的宽、高
    2. 里层盒子用来存放多张图片(里面要存放多少图片就设置宽度为多少！！)
  2. 真实存放的图片张数比实际的要多
    1. 多多少看一下你的外层盒子能装几张(浮动)
  3. 设置动画
    1. 设置盒子内层盒子的位移等于真实的那几张图片的位移！
    2. 设置动画无限滚动！！

注意点

设置动画时，图片的高度比图片要高一点图片就出不来是什么原因？

比如谷歌和Edge没有效果，ie和火狐有效果？(Edge的浏览器内核是和谷歌一样的)

原因：谷歌浏览器对于大图片的结合背景效果的时候不稳定，有bug！！！

移动端原理知识

移动端特点

移动端和PC端有什么区别

​ PC端：

  1. 定版心
  2. 页面中的元素宽高 几乎都是px单位！！ 定死大小

​ 移动端：

  1. 不会定版心
  2. 元素的大小 很少使用px单位 都会用相对长度单位 百分比单位 rem 、vw、vh(没学过) 屏幕越大，元素越大

​ 早期移动端布局：

弊端：不够方便一旦增加了元素方式对应的width代码重新去计算

​ 百分比布局也叫流式布局(宽度自适应，高度固定)

​ 主流的移动端布局：

​ flex!!!好用 方便 简单

屏幕知识（了解）

屏幕尺寸

​ 指的是屏幕对角线的长度，一般用英尺来度量

1647516083014.png

分辨率

物理分辨率：生产屏幕时就固定的，不可改变的

逻辑分辨率：由软件(驱动)决定的

网页制作参考的是逻辑分辨率

视口

布局视口

理想视口

1647518770403.png

meta标签对网页设置 设置语言、设置seo关键字

name告诉meta标签要设置什么地方viewport视口

content设置视口的那些内容

  1. width=device-width 视口的宽度等于屏幕的宽度

  2. initial-scale=1.0 设置网页打开的时候缩放的倍数1.0倍

    有需要要缩放网页！！

  3. maximum-scale=1 假如允许缩放，最大缩放的倍数 1.0

  4. minimum-scale=1 假如允许缩放，最小缩放的倍数 1.0

  5. user-scalable=no 控制是否允许用户双击、手指、捏合的手势来缩放网页

    1. no 不允许 靠不同厂商的浏览器来自动缩放 脱离了开发者的控制
    2. 真要缩放 开发者自己写js代码来控制做到不同浏览器用同样的手势功能一样

  6. 工作的用法

    代码存在一些区别无所谓，功能都一样没必要去纠结，直接使用即可。

    1. 直接用vscode生成
    2. 自己再写一次，快捷写法：meta：vp + tab
    3. 其他公司的网页视口代码拷贝过来即可

多倍图

目前前端主流看待多倍图 解决方式

  • 市场上的手机不会有1倍清晰的屏幕

  • 各大it公司直接使用高清图 3倍图或者2倍即可

    图片使用3倍 --->3倍清晰屏幕 完美

    图片使用3倍 --->2倍清晰屏幕 至多只能感受2倍清晰 浪费流量去加载不能直接显示完毕3倍图

    图片使用3倍 --->1倍清晰屏幕 手机淘汰 很少

    =========================================

    图片使用2倍 --->3倍清晰屏幕 只能感受到2倍清晰

    图片使用2倍 --->2倍清晰屏幕 完美

    图片使用2倍 --->1倍清晰屏幕 手机淘汰

  • 前端在写代码的时候还是和以前一样美工给什么图片我们直接通过src属性使用图片

    srcset属性很少用！！！

Flex布局(重点！！！)

特点

  • 是一种浏览器提倡的布局模式
  • 布局网页更简单、灵活
  • 避免浮动脱标问题

使用Flex布局后有什么变化

  1. 设置div变成flex盒子 弹性flex

    display: flex; (简写df)

  2. div中子元素发生一些改变

    1. 设置了flex的盒子 称之为父项
    2. 盒子里面的子元素称之为子项

  3. 具体变化

    1. 不在区分什么块级、行内和行内块元素，全部可以设置宽和高

    2. 子项 默认的宽度和高度

      宽度 由内容撑开

      高度 等于父项的高度

    3. 子项

      使用浮动效果----无效

      使用定位、margin、transform----有效

    4. 默认情况下 子项大于父项的宽 它也不会换行！！！

      flex不会换行 只会压缩自己本身的宽度

Flex布局对齐方式

Flex布局存在主轴 、侧轴(类似excel)

  1. 主轴 = X轴 = 水平方向 默认主轴X轴
  2. 侧轴 = Y轴 = 垂直方向
  3. 给父项添加的 父项中设置 主轴对齐方式
设置主轴对齐方式

justify-content: ;

  1. 左对齐 flex-start

  2. 右对齐 flex-end

  3. 居中对齐 center

  4. 先两侧对齐再间隔存放space-between；（简写sb）

1647518572076.png

  1. 间隔存放space-around；（简写sd）

1647518587354.png

  1. 绝对平均space-evenly；(简写sv)

1647518601520.png

设置侧轴对齐方式

单行：align-items: ;

多行：align-content: ;

注意单行对齐属性不能用到多行上，会显示错误，同理多行也不能用到单行上！！！！

单行
  1. 顶部对齐align-items: flex-start;
  2. 垂直居中align-items: center;
  3. 底部对齐align-items: flex-end;
多行

  1. 顶部对齐align-content: flex-start;

  2. 垂直居中align-content: center;

  3. 底部对齐align-content: flex-end;

  4. 先上下对齐再间隔存放space-between；（简写sb）

1647570021066.png

  1. 间隔存放space-around；（简写sd）

1647570069035.png

  1. 绝对平均space-evenly；

1647570121419.png

换行属性

flex-wrap: ;

  1. nowrap不换行 默认
  2. wrap 换行
修改主轴方向

flex-direction: ;

子项的默认宽度等于父项的宽度

子项的高由内容撑开

  1. row 默认值 水平方向 从左往右 少用

1647572119849.png

  1. row-reverse 从右到左 少用

1647572146606.png

  1. column 从上到下 常用

1647572187714.png

  1. column-reverse 从下到上 少用

1647572230504.png

子项

1.flex 设置子项占父项宽度(高度)的比例

2.align-self设置子项自己在侧轴上的对齐方式

  1. flex-start
  2. flex-end
  3. center

3.默认的宽度等于内容撑开

4.默认的高度等于父项的高

5.flex:1;设置子项的宽度

6.align-self设置子项在侧轴上的对齐(要在子项上设置)

7.主轴方向改了cloumn

  1. 默认的高度由内容撑开
  2. flex:1;设置子项的高度
  3. align-self设置子项在侧轴上的对齐(水平)
  4. 默认的宽度等于父项的宽度
avatar
文章
阅读
粉丝