CSS是一种用于控制网页样式的语言，其中包含了很多有趣的动画和效果。在这篇文章中，我们将介绍一些常见的CSS动画和效果。

/* 使用CSS实现动画 */
/* 1. transition过渡效果 */
/* 使用transition可以让元素在状态改变时平滑地过渡 */
.box {
background-color: red;
transition: background-color 1s;
}
.box:hover {
background-color: blue;
}
/* 2. transform动画 */
/* 使用transform可以以更加自然的方式动态改变元素的形状和位置 */
.box {
transform: scale(1);
transition: transform 1s;
}
.box:hover {
transform: scale(1.5);
}
/* 3. animation动画 */
/* 使用animation可以创建更加复杂和有趣的动画效果 */
.box {
animation: myanimation 1s infinite;
}
@keyframes myanimation {
0% {
transform: scale(1);
}
50% {
transform: scale(2);
}
100% {
transform: scale(1);
}
}
/* CSS实现效果 */
/* 1. 渐变背景色 */
/* 使用linear-gradient可以创建从一个颜色到另一个颜色的渐变 */
.box {
background: linear-gradient(red, blue);
}
/* 2. 阴影效果 */
/* 使用box-shadow可以创建元素的阴影效果 */
.box {
box-shadow: 5px 5px 5px grey;
}
/* 3. 边框动画 */
/* 使用border-image和animation可以创建一个有趣的边框动画 */
.box {
border: 5px solid transparent;
border-image: linear-gradient(to bottom, red, blue) 1 100%;
animation: borderanimation 2s infinite alternate;
}
@keyframes borderanimation {
0% {
border-image-slice: 1 0;
}
100% {
border-image-slice: 0 1;
}
}

以上就是一些常见的CSS动画和效果的实现方法。有了这些技巧，你可以在设计网页时创造出更加生动有趣的效果。