CSS3实用方法总结(推荐)

1. 布局

1.1 弹性盒模型

弹性盒模型可以对一个元素的子元素进行自适应布局，更加灵活，可以实现传统布局实现不了的效果。常用的几个属性有：

• display: flex：将元素设为弹性容器
• flex-direction：设置弹性容器的主轴方向
• justify-content：在弹性容器中对齐元素
• align-items：在弹性容器中对齐元素

示例代码：

.container {
  display: flex;
}

1.2 网格布局

网格布局可以将页面分成网格，在每个网格中进行布局。常用的几个属性有：

• display: grid：将元素设为网格容器
• grid-template-columns：设置网格列数和列宽
• grid-template-rows：设置网格行数和行高
• grid-gap：设置网格之间的间距

示例代码：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px;
  grid-gap: 10px;
}

2. 动画

2.1 过渡动画

过渡动画可以让元素在状态改变时平滑地进行过渡。常用的几个属性有：

• transition-property：设置过渡的属性
• transition-duration：设置过渡的时间
• transition-timing-function：设置过渡的时间函数
• transition-delay：设置过渡的延迟时间

示例代码：

.box {
  background-color: red;
  transition-property: background-color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}

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

2.2 关键帧动画

关键帧动画可以让元素根据时间线进行动画。常用的几个属性有：

• @keyframes：定义关键帧动画
• animation-name：设置动画名称
• animation-duration：设置动画的总时间
• animation-timing-function：设置动画的时间函数
• animation-iteration-count：设置动画的播放次数
• animation-direction：设置动画播放的方向
• animation-delay：设置动画的延迟时间
• animation-fill-mode：设置动画结束状态

示例代码：

.box {
  animation-name: move;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes move {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(50px);
  }
  100% {
    transform: translateX(0);
  }
}

以上是CSS3实用方法总结的简单介绍，仅仅提取了其中的部分内容作为示例说明。完整的攻略可以参考文章CSDN博客：CSS3实用方法总结(推荐)。