在CSS中,可以使用transition、transform、@keyframes等属性和关键字来为页面元素添加动画效果。
transition属性可以为元素的属性变化添加过渡效果。例如,当鼠标悬停在一个链接上时,可以让链接的颜色渐变过渡到另一种颜色。
a {
color: red;
transition: color 0.5s ease;
}
a:hover {
color: blue;
}
上面的代码表示当鼠标悬停在链接上时,链接的颜色会在0.5秒内从红色渐变到蓝色。
transform属性可以改变元素的形状、大小和位置,也可以旋转元素。例如,可以使用transform属性来创建一个旋转的动画效果。
img {
transition: transform 2s;
}
img:hover {
transform: rotate(360deg);
}
上面的代码表示当鼠标悬停在图片上时,图片会在2秒内旋转360度。
@keyframes关键字可以定义动画的关键帧,即动画开始和结束的状态。例如,可以使用@keyframes关键字来创建一个闪烁的动画效果。
div {
animation: blink 2s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
上面的代码表示一个div元素会无限次地闪烁,每次闪烁的时间为2秒。