CSS卡片布局和动画

邓孝慈老公

已于 2023-06-06 15:09:39 修改

阅读量550

点赞数

文章标签： css css3 前端

于 2023-06-06 14:50:33 首次发布

本文链接：https://blog.csdn.net/qq_50583932/article/details/131066397

版权

卡片布局

css实现卡片布局一般用grid比较方便。如果需要实现响应式那就需要用到媒体查询。

屏幕的常用宽度

320px：智能手机
768px：iPad横屏
1024px：大屏笔记本
1440px：大屏电脑桌面

屏幕适配区间

一般屏幕适配的区间没有固定限制，可以由开发者自己定义。由于媒体查询定义的代码遵循从上到下的依次匹配的规则，所以为了便于书写方便，我们可以这样写：

mix-width：从上到下数值依次增大
max-width：从上到下数值依次减小

也就是：

@media screen and (min-width: 320px) {
  html {
    font-size: 10px;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 12px;
  }
}

@media screen and (min-width: 992px) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 18px;
  }
}

@media screen and (min-width: 1600px) {
  html {
    font-size: 20px;
  }
}

如果用max-width就需要从上到下数值依次减小的写。当然，也可以不适用从上至下依次匹配的规则，这样就可以随便写，但是需要把区间写全，比如以下这个表示最小宽度为320px最大宽度为700px的屏幕。

@media screen and (min-width: 320px) and (max-width: 700px) {
  html {
    font-size: 10px;
  }
}

rem的使用

rem是用于响应式布局的常用单位，1rem和1*(html元素的字体大小)是等价的。我们使用rem一般会先定义媒体查询，然后设置不同屏幕对应的html元素的字体大小，然后在普通元素的样式上用rem单位来设置字体大小、宽高等属性。但是，在特定的使用场景中，我们无法做到使用一套css和一套定义了html字体的媒体查询代码来适配所有的屏幕，所以，我们还是会直接在对应的媒体查询里面对元素的样式进行分别设置。

rem实现卡片响应式

<div class="card-list">
    <div class="card">
      <div>
        <h3>Card Title</h3>
        <p>Card2</p>
      </div>
    </div>
    <div class="card">
      <div>
        <h3>Card Title</h3>
        <p>Card2</p>
      </div>
    </div>
    <div class="card">
      <div>
        <h3>Card Title</h3>
        <p>Card2</p>
      </div>
    </div>
    <div class="card">
      <div>
        <h3>Card Title</h3>
        <p>Card2</p>
      </div>
    </div>
    <div class="card">
      <div>
        <h3>Card Title</h3>
        <p>Card2</p>
      </div>
    </div>
    <div class="card">
      <div>
        <h3>Card Title</h3>
        <p>Card2</p>
      </div>
    </div>
    <div class="card">
      <div>
        <h3>Card Title</h3>
        <p>Card2</p>
      </div>
    </div>
  </div>

.card-list {
  display: grid;
  /* grid-column-gap: 2rem; */
  grid-row-gap: 1.8rem;
}

.card-list .card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.card-list .card>div {
  width: 20rem;
  height: 15rem;
  background-color: pink;
  border: 1px solid #ccc;
  text-align: center;
}

@media screen and (min-width: 320px) {
  html {
    font-size: 10px;
  }

  .card-list {
    grid-template-columns: 1fr;
  }
}

@media screen and (min-width: 768px) {
  html {
    font-size: 12px;
  }

  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 992px) {
  html {
    font-size: 16px;
  }

  .card-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (min-width: 1200px) {
  html {
    font-size: 18px;
  }

  .card-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (min-width: 1600px) {
  html {
    font-size: 20px;
  }

  .card-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

CSS动画

css有两种动画：

transition动画：仅限于元素过渡效果的动画
keyframes动画：可以实现元素复杂的所有动画效果

transition动画

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: background-color 1s ease;
  /* 这里background-color可以改成all，也就是所有过渡属性都加上动画 */
}

.box:hover {
  background-color: blue;
}

一般transition用于元素被hover时的动画效果，它和元素被操作的事件相关。

transform属性可以让元素实现放大、缩小、旋转、换位等效果，通常也可以和transition动画一起使用。比如：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  transition: transform 1s ease;
}

.box:hover {
  transform: scale(1.2);
}

总的来说，transition动画的实现分为两步：

定义元素的过渡效果，如hover等。
给元素加上transition属性设置元素的过渡动画。

keyframes动画

keyframes动画一般是定义元素从渲染开始就存在的动画效果，并不是和transition一样定义的是元素上的事件效果。
keyframes定义动画名：

@keyframes [动画名]{
  [百分数] {
    /*经过百分数的状态(至少要定义一个初始状态和一个最终状态两个状态)*/
  }
}

下面是给box定义一个旋转360度的动画效果：

.box {
  width: 100px;
  height: 100px;
  background-color: red;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}