CSS3 过度效果、动画、多列
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）等，可以创建更加丰富和动感的页面布局。
评论已关闭