css3整理

最新推荐文章于 2024-08-10 16:57:53 发布

zy_lalala

最新推荐文章于 2024-08-10 16:57:53 发布

阅读量108

点赞数

分类专栏： CSS 文章标签： css3

本文链接：https://blog.csdn.net/zy_lalala/article/details/119871314

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、transition 过渡

过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用flash动画或js的情况下，当元素从一种样式变换为另一种样式时，为元素添加效果。

过渡动画：是从一个状态渐渐的过渡到另一个状态，经常和 :hover 一起搭配使用
语法：transition: 要过渡的属性花费时间运动曲线何时开始；

要过渡的属性：想要变化的css属性。高度/宽度/背景颜色/内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
花费时间：单位是秒s（必须写单位），比如0.5s
运动曲线：默认是ease（该项可以省略，ease：缓和）
何时开始：单位是秒s（必须写单位），可以设置延迟出发时间，默认是0s（可以省略）

一般写前两个属性值即可后2个省略

<head>
  <style>
    img {
      width: 100px;
      height: 100px;
      /* 滤镜模糊处理，数值越大越模糊 */
      filter: blur(5px);
      /* 所有属性过渡变化，用时1s */
      transition: all 1s;
    }

    img:hover {
      width: 200px;
      height: 200px;
      /* 鼠标经过，图片变清晰 */
      filter: blur(0);
    }
  </style>
</head>

<body>
  <img src="../dog.webp">
  <h3>
    transition: 要过渡的属性 花费时间<br>
    filter：滤镜；<br>
    blur()：模糊处理，数值越大越模糊
  </h3>
</body>

显示效果如下：

在这里插入图片描述

二、2D 转换 transform

2D变换的常用方法：

translate()：移动
rotate()：旋转
scale()：缩放
skew()：倾斜。
matrix()：包含移动，旋转，缩放，倾斜

1. translate 移动

transform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

2D 移动主要是指水平、垂直方向上的移动
translate 最大的优点就是不影响其他元素的位置
translate 中的100%单位，是相对于本身的宽度和高度来进行计算的
行内标签没有效果

<style>
  img {
    width: 100px;
    height: 100px;
    transition: all 1s;
  }

  img:hover {
    transform: translate(100px, 100px);
  }
</style>

  <img src="../dog.webp">
  <h3>translate移动不会影响其他元素的位置</h3>

显示效果如下：

在这里插入图片描述

2. rotate 旋转

2D 旋转指的是让元素在二维平面内顺时针或者逆时针旋转

/* 单位是：deg */
transform: rotate(度数)

rotate 里面跟度数，单位是 deg
角度为正时，顺时针，角度为负时，逆时针
默认旋转的中心点是元素的中心点

<style>
  img {
    width: 150px;
    height: 150px;
    transition: all 1s;
  }

  img:nth-child(1):hover {
    transform: rotate(180deg);
  }

  img:nth-child(2):hover {
    transform: rotate(-180deg);
  }
</style>

  <img src="../dog.webp">
  <img src="../cat.jpeg">

显示效果如下：

在这里插入图片描述

3. scale 缩放

scale用来控制元素的放大与缩小

transform: scale(x, y)

注意，x 与 y 之间使用逗号进行分隔
transform: scale(2, 2): 宽和高都放大了二倍
transform: scale(2): 如果只写了一个参数，第二个参数就和第一个参数一致
transform:scale(0.5, 0.5): 缩小为原来的一半
scale 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子

<style>
  img {
    width: 150px;
    height: 150px;
    margin-top: 40px;
    transition: all 1s;
  }

  /* 鼠标移动上去，宽高缩小为原来的0.5倍 */
  img:nth-of-type(1):hover {
    transform: scale(0.5, 0.5);
    /* 可简写为transform: scale(0.5); */
  }

  /* 鼠标移动上去，宽高放大为原来的2倍 */
  img:nth-of-type(2):hover {
    transform: scale(2);
  }
</style>

  <h3>scale缩放不会影响其他元素的位置</h3>
  <img src="../dog.webp">
  <img src="../cat.jpeg">
  <h3>scale缩放不会影响其他元素的位置</h3>

显示效果如下：

在这里插入图片描述

4. skew 倾斜

包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。

skewX(度数)——表示只在X轴(水平方向)倾斜。
skewY(度数)——表示只在Y轴(垂直方向)倾斜。

<style>
  img {
    width: 150px;
    height: 150px;
    margin: 0 40px;
    transition: all 1s;
  }

  /* 鼠标移动上去，x轴倾斜20度，y轴倾斜30度 */
  img:nth-of-type(1):hover {
    transform: skew(20deg, 30deg);
  }

  /* 鼠标移动上去，反方向在x轴倾斜30度 */
  img:nth-of-type(2):hover {
    transform: skewX(-30deg);
  }
</style>

  <p>skew倾斜不会影响其他元素的位置</p>
  <img src="../dog.webp">
  <img src="../cat.jpeg">
  <h3>skew倾斜不会影响其他元素的位置</h3>

显示效果如下：

在这里插入图片描述

5. matrix

matrix(矩阵；模型)

matrix 方法将上面2D变换方法合并成一个，同时实现平移，旋转，缩放，倾斜

6. 常用2D转换属性综合写法及顺序问题

同时使用多个转换，其格式为 transform: translate() rotate() scale()
顺序会影响到转换的效果(先旋转会改变坐标轴方向)
当我们同时有位置或者其他属性的时候，要将位移放到最前面

div:hover {
  transform: translate(200px, 0) rotate(360deg) scale(1.2)
}

三、transform-origin 转换中心点

transform-origin: x y;

注意后面的参数 x 和 y 用空格隔开
x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 center center
还可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

案例：

  <style>
    div {
      width: 200px;
      height: 200px;
      border: 1px solid pink;
      margin: 100px auto;
      /* 把盒子外面的先隐藏 让转的盒子转进去之前看不到 */
      overflow: hidden;
    }

    div::before {
      content: "";
      /* before伪元素是行内元素，要设置宽高，需要转换 */
      display: block;
      width: 100%;
      height: 100%;
      background-color: pink;
      /* 先把before这个盒子转到下面，让先看不到 */
      transform: rotate(90deg);
      /* 默认的旋转点是中心，所以需要转换中心点 为左下角 */
      transform-origin: left bottom;
      /* 给加过渡 */
      transition: all 0.5s;
    }

    /* 鼠标经过div 里面的before 复原 */
    div:hover::before {
      transform: rotate(0deg);
    }
  </style>

  <div></div>

显示效果如下：

在这里插入图片描述

四、动画

动画可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果

1. 动画的基本使用

先定义动画

@keyframes 动画名称 {
    0% {
        width: 100px;
    }
    100% {
        width: 200px
    }
}

再调用定义好的动画

div {
	/* 调用动画 */
    animation-name: 动画名称;
 	/* 持续时间 */
 	animation-duration: 持续时间；
}

2. 动画序列

0% 是动画的开始，100 % 是动画的完成，这样的规则就是动画序列
在 @keyframs 中规定某项 CSS 样式，就由创建当前样式逐渐改为新样式的动画效果
动画是使元素从一个样式逐渐变化为另一个样式的效果，可以改变任意多的样式任意多的次数
用百分比来规定变化发生的时间，或用 from 和 to，等同于 0% 和 100%

3. 常见属性

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframe动画的名称（必须的）
animation-duration	动画完成一个周期所花费的时间，秒/毫秒，默认是0（必须的）
animation-timing-function	动画的速度曲线，默认是"ease"：低速开始，加快进行，结束前变慢；linear:匀速；steps()：指定了时间函数中的间隔数量（步长）
animation-delay	动画何时开始，默认是0，立刻开始
animation-iteration-count	动画被播放的重复次数，默认是1，还有infinite无限次播放
animation-direction	动画是否在下一周期逆向播放，默认是"normal"不逆向，逆播放：“alternate”
animation-play-state	动画是否正在运行性或暂停，默认是"nunning"，暂停：“paused”
animation-fill-mode	动画结束后的状态，默认回到起始状态backwards，停在结束状态forwards，

4. 动画简写方式

/* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */
animation: name duration timing-function delay iteration-count direction fill-mode

简写属性里面不包含 animation-paly-state
暂停动画 animation-paly-state: paused; 经常和鼠标经过等其他配合使用
要想动画走回来，而不是直接调回来：animation-direction: alternate
盒子动画结束后，停在结束位置：animation-fill-mode: forwards

案例：实现打字机效果

<style>
  @keyframes w {
    0% {
      width: 0;
    }

    100% {
      width: 200px;
    }
  }

  div {
    /* 实现打字机效果 */
    /* 一个字20px 10个字是200px = 完成动画时的宽度 */
    font-size: 20px;
    width: 0;
    height: 30px;
    background-color: pink;
    /* steps 就是分几步来完成动画 
    打字机效果：10个字，分10步来完成，就是每一步打一个字 */
    animation: w 3s steps(10) forwards;
    /* 让文字强制一行内显示 */
    white-space: nowrap;
    overflow: hidden;
  }
</style>

<div>祝你每一天都有好心情</div>

显示效果如下：

在这里插入图片描述

五、3D转换 transform

1. 认识 3D 转换

3D 的特点
- 近大远小
- 物体和面遮挡不可见
三维坐标系
- x 轴：水平向右 – 注意：x 轴右边是正值，左边是负值
- y 轴：垂直向下 – 注意：y 轴下面是正值，上面是负值
- z 轴：垂直屏幕 – 注意：往外边的是正值，往里面的是负值

2. 3D 转换知识要点

3D 移动：translate3d(x, y, z)
3D 旋转：rotate3d(x, y, z)
透视：perspctive
3D呈现 transfrom-style

3. perspective 透视

如果想要网页产生 3D 效果需要透视(理解成 3D 物体投影的 2D 平面上)
实际上模仿人类的视觉位置，可视为安排一只眼睛去看
透视也称为视距，就是人的眼睛到屏幕的距离
距离视觉点越近的在电脑平面成像越大，越远成像越小
透视的单位是像素

透视需要写在被视察元素的父盒子上面

z 轴值越大(正值)，我们看到的物体就越大

/* 人的眼睛到屏幕的距离即视距，视距越小，屏幕成像越大；视距越大，屏幕成像越小 */
body {
  perspective: 1000px; 
}

案例：

不加透视：

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
    margin: 30px;
    transition: all 1s;
  }

  div:hover {
    transform: translate3d(300px, 0, 100px);
  }
</style>

<div></div>

显示效果如下：看不出z轴的移动效果，只能看到x轴平移：

在这里插入图片描述

被观察元素div的父盒子是body，给body加上透视属性：

body {
  perspective: 300px;
}

显示效果如下：可以看到图像变大，感受到z轴的移动效果

在这里插入图片描述

4. translate3d 3D移动

3D 移动就是在 2D 移动的基础上多加了一个可以移动的方向，就是 z 轴方向。

transform: translateX(100px)：仅仅是在 x 轴上移动

transform: translateY(100px)：仅仅是在 y 轴上移动

transform: translateZ(100px)：仅仅是在 z 轴上移动

transform: translate3d(x, y, z)：其中x、y、z 分别指要移动的轴的方向的距离

注意：x, y, z 对应的值不能省略，不需要移动的用 0 进行填充

/* z表示物体距离屏幕的距离 ，z轴越大(正值)，我们看到的物体就越大 */
transform: translateZ(100px);
/* 简写：translate后面一定记得跟3d */
transform: translate3d(100px, 100px, 100px)
/* 注意：简写时x, y, z 对应的值不能省略，不需要填写的用 0 进行填充 */
transform: translate3d(0, 100px, 100px)

5. rotate3d 3D旋转

3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴或者自定义轴进行旋转。

transform: rotateX(45deg) – 沿着 x 轴正方向旋转 45 度
transform: rotateY(45deg) – 沿着 y 轴正方向旋转 45 度
transform: rotateZ(45deg) – 沿着 z 轴正方向旋转 45 度
transform: rotate3d(x, y, z, 45deg) – 沿着自定义轴旋转 45 deg 为角度

x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度

transform: rotate3d(1, 1, 0, 45deg) 表示沿着向右下角的对角线旋转 45deg

左手准则

左手的手拇指指向 x 轴的正方向，其余手指的弯曲方向就是该元素沿着 x 轴旋转的方向
左手的拇指指向 y 轴的正方向，其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值)

<head>
  <style>
    /* 加透视 透视写在被观察者的父盒子上面 */
    body {
      perspective: 500px;
    }

    img {
      width: 150px;
      height: 150px;
      margin: 20px;
      transition: all 1s;
      vertical-align: middle;
    }

    .x:hover {
      transform: rotateX(45deg);
      /* 也可写为 transform: rotate3d(1, 0, 0, 45deg); */
    }

    .y:hover {
      transform: rotateY(45deg);
      /* 也可写为 transform: rotate3d(0, 1, 0, 45deg); */
    }

    .z:hover {
      transform: rotateZ(45deg);
      /* 也可写为 transform: rotate3d(0, 0, 1, 45deg); */
    }

    .duijiaoxian:hover {
      transform: rotate3d(1, 1, 0, 45deg);
    }
  </style>

</head>

<body>
  沿 x 轴正方向旋转 45度：
  <img src="../dog.webp" class="x">

  沿 y 轴正方向旋转 45度：
  <img src="../dog.webp" class="y"> <br>

  沿 z 轴正方向旋转 45度：
  <img src="../dog.webp" class="z">

  沿 右下角对角线 旋转 45度：
  <img src="../dog.webp" class="duijiaoxian">
</body>

显示效果如下：
在这里插入图片描述

6. transform-style 3D呈现

控制子元素是否开启三维立体环境
transform-style: flat 代表子元素不开启 3D 立体空间，默认的
transform-style: preserve-3d 子元素开启立体空间
代码写给父级，但是影响的是子盒子

案例：

<head>
  <style>
    body {
      /* 透视 */
      perspective: 500px;
    }

    .box {
      /* 3. 父盒子不加背景色，给父盒子加transform-style————使得子盒子保持3d效果 */
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      /* 过渡 */
      transition: all 2s;
      /* 让子元素保持3d立体空间环境 给父盒子写 */
      transform-style: preserve-3d;
    }

    /* 4. 鼠标经过父盒子，让父盒子带着2个子盒子一起沿着y轴旋转 */
    .box:hover {
      transform: rotateY(80deg);
    }
	/* 1. 先用定位让2个子盒子重叠在一起 */
    .box div {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: pink;
    }

    /* 2. 再让一个盒子沿x轴旋转，与另一个盒子交叉 */
    .box div:last-child {
      background-color: skyblue;
      transform: rotateX(60deg);
    }
  </style>
</head>

<body>
  <div class="box">
    <div></div>
    <div></div>
  </div>
</body>

显示效果如下：

在这里插入图片描述

六、媒体查询

1. 什么是媒体查询？

媒体查询（Media Query）是CSS3新语法。

使用 @media查询，可以针对不同的媒体类型定义不同的样式
@media 可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询

2. 媒体查询语法规范

用 @media开头注意@符号
mediatype 媒体类型
关键字 and not only
media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype 查询类型

将不同的终端设备划分成不同的类型，称为媒体类型

值	描述
all	用于所有多媒体类型设备
print	用于打印机
screen	用于电脑屏幕，平板，智能手机等。
speech	用于屏幕阅读器

关键字

关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。

and：可以将多个媒体特性连接到一起，相当于“且”的意思。
not：排除某个媒体类型，相当于“非”的意思，可以省略。
only：指定某个特定的媒体类型，可以省略。

媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。注意他们要加小括号包含。

width——定义输出设备中页面可见区域的宽度
min-width——定义输出设备中页面最小可见区域宽度
max-width——定义输出设备中页面最大可见区域宽度

媒体查询书写规则

注意：为了防止混乱，媒体查询我们一般按照从小到大的顺序来写，这样代码更简洁

<style>
  @media screen and (min-width:200px) {
    body {
      background-color: red;
    }
  }

  @media screen and (min-width:300px) {
    body {
      background-color: pink;
    }
  }

  @media screen and (min-width:400px) {
    body {
      background-color: lightgreen;
    }
  }

  @media screen and (min-width:500px) {
    body {
      background-color: green;
    }
  }
</style>

显示效果如下：

在这里插入图片描述

zy_lalala

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3整理

一、transition 过渡过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用flash动画或js的情况下，当元素从一种样式变换为另一种样式时，为元素添加效果。过渡动画：是从一个状态渐渐的过渡到另一个状态，经常和 :hover 一起搭配使用语法：transition: 要过渡的属性花费时间运动曲线何时开始；要过渡的属性：想要变化的css属性。高度/宽度/背景颜色/内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以花费时间：单位是
复制链接

扫一扫

专栏目录