css做的动画效果 |css怎么加个链接

/* 1. 渐变过渡 */
#gradualChange{
width: 200px;
height: 200px;
background-color: yellow;
transition: background-color 2s;
}
#gradualChange:hover{
background-color: red;
}
/* 2. 弹跳效果 */
@keyframes bounce{
0%, 20%, 50%, 80%, 100%{
transform: translateY(0);
}
40%{
transform: translateY(-30px);
}
60%{
transform: translateY(-15px);
}
}
#bounce{
width: 100px;
height: 100px;
background-color: blue;
animation: bounce 2s ease-in-out;
}
/* 3. 旋转效果 */
@keyframes rotate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
#rotate{
width: 100px;
height: 100px;
background-color: green;
animation: rotate 2s infinite linear;
}
/* 4. 翻转效果 */
.flip{
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
transition: all 1s ease-in-out;
}
.flip:hover{
transform: rotateY(180deg);
}
.front, .back{
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.front{
background-color: magenta;
}
.back{
transform: rotateY(180deg);
background-color: cyan;
}

以上四种动画效果分别是渐变过渡、弹跳效果、旋转效果和翻转效果。它们都有自己的特点和用途，可以根据不同的页面需求进行选择使用。当然，这只是CSS动画效果的冰山一角，还有很多其他的效果等待大家去发现和应用。