CSS3动画效果案例
CSS3是网页设计中的强大工具，它提供了许多功能，如过渡（transitions）、变形（transforms）、阴影（shadows）、渐变（gradients）和动画（animations）等，这些特性使得设计师可以在无需使用JavaScript或Flash的情况下创建丰富的交互体验和动画效果。
下面是一个CSS3动画效果的案例，我们将创建一个简单的按钮，当用户鼠标悬停时，按钮会产生一个旋转的动画效果。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<button class="button">点击我</button>
</body>
</html>CSS代码（styles.css）：
.button {
padding: 10px 20px;
font-size: 20px;
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
transition: all 0.5s; /* Animation */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-moz-transition: all 0.5s; /* Firefox */
-ms-transition: all 0.5s; /* IE 9 */
-o-transition: all 0.5s; /* Opera */
}
.button:hover {
background-color: #45a049;
animation-name: spin; /* Animation name */
animation-duration: 10s; /* Animation duration */
animation-iteration-count: infinite; /* Infinite animation */
}
/* Safari and Chrome keyframes animation */
@-webkit-keyframes spin {
from {background-color: #4CAF50;}
to {background-color: #45a049;}
}在这个案例中，我们首先创建了一个HTML按钮，然后在CSS中定义了按钮的样式，我们使用了`transition`属性来添加一个过渡效果，使得状态变化更加平滑，当鼠标悬停在按钮上时，背景颜色会从`#4CAF50`变为`#45a049`，我们还添加了一个名为`spin`的动画效果，使得按钮在10秒内背景颜色不断变化，`animation-iteration-count: infinite;`表示动画将无限次重复。
这个案例是一个简单的CSS3动画效果，通过它可以展示出CSS3的强大功能和灵活性，CSS3还有许多其他的功能和效果，比如变形、阴影、渐变等，这些都可以用来创建更加丰富和动态的网页效果。
