纯CSS实现立体纸张折叠动效

2025-04-18 10:12:43

<!DOCTYPE html>

<html>

<head>

<style>

.shadow-card {

width: 300px;

padding: 2rem;

background: #fff;

border-radius: 12px;

box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 初始阴影 */

transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

.shadow-card:hover {

box-shadow: 0 8px 24px rgba(0,0,0,0.15); /* 扩散阴影 */

}

.shadow-3d:hover {

box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);

transform: translateY(-8px);

}

</style>

</head>

<body>

<h2>悬浮查看阴影魔法</h2>

<p>CSS阴影交互效果</p>

</div>

</body>

</html>

随机文章