css点击位移 |多屏动画css3

.btn {
display: inline-block;
padding: 10px 20px;
background-color: #009688;
color: #fff;
transition: transform .3s ease;
}
.btn:hover {
transform: translateY(-5px);
}

上述代码就是一个简单的点击位移效果，当用户鼠标悬停在按钮上时，按钮会向上移动5像素，制造出一种被按下的效果。

在这个代码中，大家使用了CSS3的transform属性来实现位移效果。transform包括了多种变换方式，例如旋转、缩放、位移等等。在这个例子中，大家使用的是translateY()函数，它可以在竖直方向上移动元素。-5px代表向上移动5像素，而transition属性则指定了动画效果和过渡时间，这里是0.3秒。

需要注意的是，这个点击位移效果只在按钮上发生作用，并且只有在鼠标悬停时才会触发。大家可以通过增加:hover伪类来实现，它表示当用户将鼠标悬停在元素上时，应该如何呈现样式。

总的来说，点击位移是一个十分实用的CSS功能，可以通过视觉上的变化来提示用户当前操作的结果，并增加用户的互动体验。大家可以灵活应用这个功能，在网页设计中创建更加炫酷的效果。