### 动画 & 转换 (Transform) #### 简介 CSS 中的 `transform` 属性允许我们对元素进行平移 (`translate`)、旋转 (`rotate`) 和缩放 (`scale`) 操作。它能让你轻松地改变元素的位置、角度和大小，而不会影响文档流。 #### 使用方法 你可以通过设置 CSS 的 transform 属性来进行多种类型的转换： ```css .transformed-element { /* 平移到 x=50px, y=100px */ transform: translate(50px, 100px); /* 绕 Z轴逆时针旋转45度 */ transform: rotateZ(-45deg); /* 放大两倍 */ transform: scale(2); /* 合并以上三种效果 */ transform: translate(50px, 100px) rotateZ(-45deg) scale(2); } ``` #### 关键帧动画 为了创建更复杂的动画序列，我们可以利用 @keyframes 规则定义一系列关键帧，并将其应用于目标元素上： ```css @keyframes move-and-grow { from { transform: translateX(0); } to { transform: translateX(300px) scale(1.5); } } .moving-growing-box { animation-name: move-and-grow; animation-duration: 2s; /* 完成一次完整周期所需时间 */ animation-timing-function: ease-in-out; /* 运动曲线 */ animation-iteration-count: infinite;/* 循环次数 */ } ``` #### 实际案例 - 创造一个简单的心跳脉冲效果 HTML结构: ```html <div class="heart-pulse"></div> ``` 样式文件: ```css .heart-pulse { width: 60px; height: 60px; background-color:red ; border-radius:50% ; /* 应用心跳动画 */ animation:name heartPulse linear infinite; @keyframes heartPulse{ from,to{transform:scale(.75);} // 开始与结束状态保持一致 50%{transform:scale(1);} } } ``` --- ### 媒体查询 (Media Queries) #### 简介 媒体查询让网页能够根据不同设备（如桌面浏览器、平板电脑或手机）的特点自动调整页面布局及样式，从而提供最佳用户体验。这构成了响应式设计的核心部分之一。 #### 使用方法 基本语法形式为：`@media 查询表达式 { 样式规则 }` ，其中“查询表达式”可以包括但不限于屏幕宽度、高度、方向以及分辨率等属性。 例如，在小屏幕上隐藏某些不必要的导航链接： ```css @media only screen and (max-width: 768px){ .navigation-menu li:nth-child(n+4){display:none;} } ``` 又比如当窗口尺寸足够大的时候将图片从单列排列变为双列排布： ```css .gallery img{ flex-basis: calc(50%-2rem); margin:.5em ; /* 加些间距 */ @media only screen and (min-width:992px ){ flex-basis:calc((100%/3)-2rem ); } } ``` #### 示例项目 - 构建一个简单的响应式博客列表视图 假设你有一个包含文章摘要卡片的文章列表，希望在移动设备上它们垂直堆叠显示而在较大屏幕上横向铺开形成网格状布局。 HTML片段示例： ```html <ul class='blog-posts'> <li>...</li> <!-- 更多条目 --> </ul> ``` CSS代码如下所示： ```css .blog-posts { list-style-type:none; padding-inline-start:0; display:flex; gap:1rem; flex-direction:column; @media(min-width : 768px){ flex-wrap:wrap; flex-direction:row; } } ``` 这样做的结果是在窄屏下所有帖子会按顺序依次向下排列；一旦可用空间增加到一定程度，则改为一行内展示多个帖子块的形式。