[分享]css3支持交互

在现代网页设计中，CSS3已经成为标配。CSS3拥有众多强大的新特性，其中支持交互的特性更是让我们的网页变得更加生动、活泼、有趣。.interactive { display: inlineblock...

在现代网页设计中，CSS3已经成为标配。CSS3拥有众多强大的新特性，其中支持交互的特性更是让我们的网页变得更加生动、活泼、有趣。

.interactive {
    display: inline-block;
    padding: 10px;
    background-color: #0077cc;
    color: #fff;
    transition: all .3s ease-in-out;
    cursor: pointer;
}

.interactive:hover {
    background-color: #ff6600;
} 

上述代码是一个简单的例子，使用CSS3的transition和:hover特性，使一个普通的按钮变成了一个具有交互性的按钮。使用transition，可以为按钮添加过渡效果，使其在hover的过程中平滑地从蓝色变为橙色；同时使用:hover，可以为按钮添加鼠标悬停效果，使其交互效果更佳。

除此之外，CSS3还提供了诸如动画、变形、过渡、渐变、阴影等特性，使我们能够创造出更加华丽、炫酷、有趣、有格调的网页效果。这些交互特性的运用，为我们的网页设计提供了更加丰富、有料的选项。

@keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
}

.spin {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-color: #0077cc;
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
} 

上述代码是一个基于CSS3动画特性的例子，使用@keyframes定义了一个旋转效果，将一个普通的圆形按钮变成了一个具有动画效果的圆形按钮。这种具有动态特效的按钮，可以吸引用户的眼球，为我们的网页增添更加动感的元素。