css 3

作者：资本principal 发布日期:2025-03-09 浏览:219

/* 示例代码：使用 CSS3 实现简单的动画效果 */

/* 定义一个类名为 'box' 的元素 */
.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: transform 1s, background-color 1s; /* 添加过渡效果 */
}

/* 当鼠标悬停在 .box 上时，改变其背景颜色并旋转 */
.box:hover {
  background-color: red;
  transform: rotate(360deg);
}

解释说明：

transition 属性用于定义当属性值发生变化时的过渡效果。这里我们设置了 transform 和 background-color 的过渡时间为 1 秒。
transform: rotate(360deg); 用于在鼠标悬停时将 .box 元素旋转 360 度。
:hover 是伪类，表示当鼠标悬停在 .box 元素上时应用的样式。

这段代码展示了如何使用 CSS3 创建一个简单的交互式动画效果。

上一篇：div+css网页布局

下一篇：css文字竖排