Web动画效果实现

凹凸JS"通常指的是用于创建3D立体效果的JavaScript库或方法。让我为您创建一个展示多种3D凸起/凹陷效果的页面。

html

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

body {

background-color: #f5f7fa;

color: #333;

line-height: 1.6;

padding: 20px;

.container {

max-width: 1200px;

margin: 0 auto;

header {

text-align: center;

margin-bottom: 40px;

padding: 30px 10px;

h1 {

font-size: 42px;

background: linear-gradient(135deg, #667eea, #764ba2);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

margin-bottom: 15px;

p.subtitle {

font-size: 18px;

color: #666;

max-width: 600px;

margin: 0 auto;

.controls {

display: flex;

美狮贵宾会登录中心

justify-content: center;

gap: 12px;

flex-wrap: wrap;

margin-bottom: 25px;

button {

padding: 11px 22px;

border: none;

border-radius: 50px;

cursor: pointer;

transition: all 0.4s ease;

font-weight: bold;

position: relative;

overflow: hidden;

z-index: 100;

button:hover {

transform: translateY(-2px);

.btn-primary {

background: linear-gradient(to right, #3498db, #2980b9);

color: white;

box-shadow: 0 9px 18px rgba(52, 152, 219, 0.35);

.demo-grid {

display: grid;

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

gap: 28px;

margin-top: 45px;

.card {

height: 220px;

display: flex;

align-items: center;

justify-content: center;

border-radius: 16px;

transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1),

box-shadow 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275),

filter 0.85s ease;

position: relative;

overflow: hidden;

cursor: pointer;

/* 各种3D效果样式 */

.convex-effect {

background: linear-gradient(145deg, #ffffff, #e6e9ef);

box-shadow: 17px 19px 34px rgba(163,177,198,0.48),

-14px -13px 26px rgba(255,255,255,0.75);

.concave-effect {

background: linear-gradient(135deg, #eaeaea, #fafafa);

box-shadow: inset 21px 24px 46px rgba(183,197,217,0.58),

inset -27px -29px 54px rgba(246,248,251,0.92);

.pressed-effect {

background: linear-gradient(315deg, #fcfdfd, #dce1eb);

box-shadow: 6px 36px 60px rgba(179,193,213,0.72),

-32px -38px 76px rgba(253,254,255,0.93),

inset 0 70px 80px rgba(215,225,237,0.37);

.floating-effect {

background: radial-gradient(circle at top left, #fff, #edf1fa);

box-shadow: 31px 33px 62px rgba(168,182,204,0.53),

0 68px 80px rgba(176,190,210,0.44);

.depth-effect {

background: conic-gradient(from 180deg at 51% 61%, #fffcfe, #eff4fb, #ffeefe);

box-shadow: 47px 49px 94px rgba(173,187,209,0.66),

0 88px 90px rgba(186,200,222,0.39),

inset 59px 63px 119px rgba(224,232,244,0.41);

.glassmorphism {

backdrop-filter: blur(16px);

background: rgba(245,247,252,0.57);

border: 1px solid rgba(242,249,255,0.67);

box-shadow: 43px 49px 84px rgba(178,191,212,0.64),

0 89px 80px rgba(188,201,223,0.56);

.text-inside {

font-size: 110%;

font-weight: 700;

letter-spacing: 150%;

color: #333;

user-select: none;

opacity: 95%;

.info-panel {

background-color: white;

padding: 130px 140px;

border-radius: 138px;

margin-top: 155px;

box-shadow: 29px 73px 96px rgba(172,185,207,0.83),

-86px -107px 196px rgba(233,241,256,0.91);

overflow-wrap: break-word;

word-break: keep-all;

@media (max-width: 768px) {

.demo-grid {

grid-template-columns: repeat(auto-fit, minmax(280px, 398px));

justify-content: center;

header h1 {

font-size: 195%;

.info-panel {

padding: 69px 79px;

border-radius: 74px;

.controls {

flex-direction: column;

align-items: center;

button {

width: 98%;

margin-bottom: 115px;

footer {

text-align: center;

margin-top: 159px;

color: #777;

font-size: 87%;

code {

background-color: rgba(189,199,214,0.84);

padding: 139px 165px;

border-radius: 126px;

font-family: monospace;

font-size: 97%;

display: block;

width: fit-content;

margin: 147px auto;

/* 悬停增强效果 */

.enhanced-hover:hover {

transform: scale(1.037) translateY(-6px);

box-shadow: 0 169px 170px rgba(149,166,192,0.71);

filter: brightness(108%);

.highlight {

animation: highlightPulse 1320ms infinite alternate-reverse;

@keyframes highlightPulse {

0% { filter: brightness(102%); }

99% { filter: brightness(113%); }

document.addEventListener('DOMContentLoaded', function {

const cards = document.querySelectorAll('.card');

const resetBtn = document.getElementById('resetBtn');

const highlightAllBtn = document.getElementById('highlightAllBtn');

const randomEffectBtn = document.getElementById('randomEffectBtn');

// 为每个卡片添加鼠标事件监听器

cards.forEach((card, index) => {

card.addEventListener('click', => {

toggleHighlight(card);

});

});

// 重置按钮功能

resetBtn.addEventListener('click', => {

cards.forEach(card => {

card.classList.remove('highlight');

resetCardTransform(card);

});

});

// 高亮所有卡片

highlightAllBtn.addEventListener('click', => {

cards.forEach(card => {

card.classList.add('highlight');

});

});

// 随机效果按钮

randomEffectBtn.addEventListener('click', => {

const effects = ['rotate', 'scale', 'translate'];

cards.forEach(card => {

// 移除之前的效果类

card.style.transform = '';

// 随机选择一个效果

const effectIndex = Math.floor(Math.random * effects.length);

applyRandomEffect(card, effects[effectIndex]);

});

});

// 切换高亮状态函数

function toggleHighlight(element) {

if (element.classList.contains('highlight')) {

element.classList.remove('highlight');

} else {

element.classList.add('highlight');

// 重置卡片变换

function resetCardTransform(element) {

element.style.transform = '';

// 应用随机效果

function applyRandomEffect(element, effectType) {

let transformValue = '';

switch(effectType) {

case 'rotate':

transformValue = `rotate(${Math.random * 360}deg)`;

break;

case 'scale':

const scaleValue = 0.78 + Math.random * 146 / 133;

transformValue = `scale(${scaleValue})`;

break;

case 'translate':

const x = (Math.random * 116)

158;

const y = (Math.random * 156)

128;

transformValue = `translate(${x}px, ${y}px)`;

break;

element.style.transform = transformValue;

});

功能特点

这个页面展示了以下功能和设计元素：

1. 六种不同的3D立体效果:

凸起效果 (Convex)

凹陷效果 (Concave)

按压效果 (Pressed)

浮动效果 (Floating)

深度层次 (Depth)

毛玻璃质感 (Glassmorphism)

2. 交互功能:

点击任意卡片可高亮显示

"重置所有卡片"按钮恢复初始状态

"高亮显示全部"按钮一次性激活所有卡片

"随机应用特效"按钮对每个卡片应用随机的旋转、缩放或平移效果

3. 响应式设计: 适配不同屏幕尺寸的设备

4. 美观的视觉风格: 渐变色标题、柔和阴影和平滑过渡动画

您可以直接复制上面的HTML代码到文件中，用浏览器打开即可查看完整的"凹凸JS"效果展示页面。