css可以实现的动态效果 |css3如何写倒数第一个类

/* 1. 悬浮特效 */ 
a:hover {
color: red;
}
/* 2. 过渡效果 */ 
.box {
width: 200px;
height: 200px;
background-color: #ccc;
transition: all 1s;
}
.box:hover {
width: 300px;
height: 300px;
background-color: #999;
color: #fff;
}
/* 3. 动画效果 */ 
.ball {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #f00;
position: absolute;
animation: jump 1s infinite;
}
@keyframes jump {
0% {
top: 0;
}
50% {
top: 50px;
}
100% {
top: 0;
}
}
/* 4. 滚动效果 */ 
.marquee {
width: 200px;
white-space: nowrap;
overflow: hidden;
animation: slide 10s linear infinite;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}

通过以上代码，大家可以看到CSS可以实现多种动态效果，比如通过悬浮特效让链接文字变色，通过过渡效果让盒子在悬浮时改变大小和颜色，通过动画效果让球形元素跳动，通过滚动效果让文本文字一直向左滚动。

CSS动态效果不仅可以增加页面的趣味性，还可以提高网站的交互性，有助于吸引用户留在页面上更长时间。