CSS3 转换过渡动画媒体查询_media 动画过渡切换-优快云博客

本文链接：https://blog.youkuaiyun.com/jingerh126/article/details/103194348

本文详细介绍了CSS的transform转换，包括translate平移、rotate旋转、scale缩放和skew倾斜；transition过渡及其速度曲线；使用@keyframes规则创建动画；以及如何运用媒体查询实现响应式设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、transform 转换

在这里插入图片描述
transform 转换的属性值有下列四种：
1. translate() 平移
通过 translate() 方法，元素从其当前位置移动到给定的位置。
属性值：Translate(水平位移，垂直位移) ，translateX(水平位移) ，translateY（垂直位移）

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);		/* IE 9 */
-webkit-transform: translate(50px,100px);	/* Safari and Chrome */
-o-transform: translate(50px,100px);		/* Opera */
-moz-transform: translate(50px,100px);		/* Firefox */
}

2. Rotate(deg) 旋转
通过 rotate(deg) 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);		/* IE 9 */
-webkit-transform: rotate(30deg);	/* Safari and Chrome */
-o-transform: rotate(30deg);		/* Opera */
-moz-transform: rotate(30deg);		/* Firefox */
}

3. Scale (n)缩放
通过 scale() 方法，元素的尺寸缩放到给定的倍数，n大于1放大，在0－1之间缩小。
属性值：scale(水平缩放，垂直缩放) ，scaleX(水平缩放) ，scaleY（垂直缩放）

div
{
transform: scale(2,4);
-ms-transform: scale(2,4);	/* IE 9 */
-webkit-transform: scale(2,4);	/* Safari 和 Chrome */
-o-transform: scale(2,4);	/* Opera */
-moz-transform: scale(2,4);	/* Firefox */
}

4. skew() 方法
通过 skew() 方法，元素翻转给定的角度。
属性值：skew(水平倾斜，垂直倾斜) ，skewX(水平倾斜) ，skewY（垂直倾斜）

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);	/* IE 9 */
-webkit-transform: skew(30deg,20deg);	/* Safari and Chrome */
-o-transform: skew(30deg,20deg);	/* Opera */
-moz-transform: skew(30deg,20deg);	/* Firefox */
}

二、transition 过渡

transition: property duration timing-function delay;
在这里插入图片描述
速度曲线：
linear 均速
Ease 慢开始，变快，慢结束
Ease-in 慢开始
Ease-out 慢结束
Ease-in-out 慢开始和结束
如需向多个样式添加过渡效果，请添加多个属性，由逗号隔开：

div
{
transition: width 2s, height 2s, transform 2s;
-moz-transition: width 2s, height 2s, -moz-transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
-o-transition: width 2s, height 2s,-o-transform 2s;
}

三、动画

使用 @keyframes 规则创建动画，用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”。
1. 用关键词 “from” 和 "to"

@keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}

@-moz-keyframes myfirst /* Firefox */
{
from {background: red;}
to {background: yellow;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
from {background: red;}
to {background: yellow;}
}

@-o-keyframes myfirst /* Opera */
{
from {background: red;}
to {background: yellow;}
}

2. 百分比

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

3. 使用动画
animation: name duration timing-function delay iteration-count direction
在这里插入图片描述

div
{
animation: myfirst 5s;
-moz-animation: myfirst 5s;	/* Firefox */
-webkit-animation: myfirst 5s;	/* Safari 和 Chrome */
-o-animation: myfirst 5s;	/* Opera */
}

四、媒体查询

1. 查询方式一：
针对不同的媒体写不同的 CSS 文件，在 head 中用 link 链接所有的 CSS 文件，在每个 link 中使用media=“mediatype and|not|only (media feature)” 调用不同的样式。

媒体类型	含义
all	用于所有设备
print	用于打印机和打印预览
screen	用于电脑屏幕，平板电脑，智能手机等。
speech	应用于屏幕阅读器等发声设备

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet"  media="screen and (min-width:1200px) " href="pc.css"/>
    <link rel="stylesheet"  media="screen and (min-width:750px) and (max-width:1199px) " href="ipad.css"/>
    <link rel="stylesheet"  media="screen and (max-width:749px) " href="mobile.css"/>
</head>

2. 查询方式二：
将所有样式写在一个 CSS 文件中，针对不同的媒体类型使用 @media 查询来定义不同的样式：

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="test.css"/>
    <title></title>
</head>
// CSS文件中按照下面方式写
@media all and (max-width:1200px) and (min-width:750px) {
    .logo{
        width:100%;

    }
    nav{
        width:100%;
    }
 
}