css3 按下 抬起

CSS3可以实现更加美观和复杂的效果，其中之一就是按下抬起效果。在CSS3中，可以通过修改元素的属性和使用伪类来实现这种效果。

button:active { 
    background-color: #333; 
    Box-shadow: 0 5px #666; 
    transform: translateY(4px); 
} 

上述代码中，使用了button:active来触发按下效果。当按钮处于按下状态时，使用了背景色、阴影和平移等属性，让按钮看起来被按下去。

a:active { 
    position: relative; 
    top: 1px; 
    left: 1px; 
}

对于链接的按下效果，可以使用a:active来实现。在这个例子中，使用了相对定位属性，将链接往右下方移动了1px，营造出被按下去的感觉。

除了使用伪类外，还可以使用CSS3中新增的transition属性来实现平滑的按下抬起效果。

button { 
    background-color: #333; 
    color: #fff; 
    border: none; 
    padding: 10px 20px; 
    transition: all .2s ease-in-out; 
} 

button:hover { 
    background-color: #666; 
    color: #fff; 
    transform: translateY(-4px); 
}

在这个例子中，使用transition属性来实现平滑过渡效果。当鼠标悬停在按钮上时，使用了变形属性和背景色改变等属性，让按钮有被按下的效果，同时平滑过渡。

总的来说，CSS3支持多种方式实现按下抬起效果，可以根据具体需求来选择适合的方法。