css手指样式

/* CSS手指样式示例 */

/* 1. 手指点击效果 - 使用伪类 :active */
.button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

.button:active {
    background-color: #3e8e41;
    transform: translateY(4px);
}

/* 解释：当按钮被点击时，背景颜色会变深，并且按钮会向下移动4px，模拟按下效果。 */

/* 2. 手指悬停效果 - 使用伪类 :hover */
.link {
    text-decoration: none;
    color: blue;
}

.link:hover {
    text-decoration: underline;
    color: red;
}

/* 解释：当鼠标悬停在链接上时，文本颜色变为红色并添加下划线，模拟手指悬停的效果。 */

/* 3. 手指触摸效果 - 使用 touch-action 属性 */
.touch-element {
    touch-action: manipulation;
    transition: transform 0.3s;
}

.touch-element:active {
    transform: scale(0.9);
}

/* 解释：当元素被触摸时，它会缩放至原来的90%，模拟手指触摸的反馈效果。 */