在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秒。