CSS3 过度效果、动画、多列

作者：System 时间：2024年08月14日分类：所有,css3 字数：699

这篇文章距离上次修改已过442天，其中的内容可能已经有所变动。

CSS3 提供了丰富的过度效果、动画和多列布局的功能。以下是一些示例代码：

过度效果（Transition）:




/* 应用一个简单的过渡效果到元素的背景色和高度 */
div {
  transition: background-color 0.5s, height 0.5s;
}
 
/* 鼠标悬停时触发过渡 */
div:hover {
  background-color: yellow;
  height: 100px;
}

动画（Animation）:




/* 定义一个名为 'fadeInOut' 的动画 */
@keyframes fadeInOut {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
 
/* 应用动画到元素 */
div {
  animation: fadeInOut 3s infinite;
}

多列布局（Multi-column Layout）:




/* 设置多列布局，列数为3，列间隔为10px */
div {
  column-count: 3;
  column-gap: 10px;
}

这些示例展示了如何在CSS中使用过度、动画和多列布局的基本用法。CSS3提供了更多高级功能，如矩阵变换（Transform）、阴影（Box Shadow）、圆角（Border Radius）等，可以创建更加丰富和动感的页面布局。

CSS3 过度效果、动画、多列

评论已关闭

推荐阅读