当前位置：首页 > JavaScript

js实现骷髅

2026-02-01 22:13:40JavaScript

实现骷髅效果的方法

使用CSS和JavaScript可以在网页上创建骷髅效果。以下是几种常见的实现方式：

使用CSS动画

通过CSS的@keyframes定义骷髅骨架的动画效果：

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

使用JavaScript动态生成

通过JavaScript动态创建骨架屏元素：

function createSkeleton() {
  const skeleton = document.createElement('div');
  skeleton.className = 'skeleton';
  skeleton.style.width = '100%';
  skeleton.style.height = '20px';
  skeleton.style.margin = '10px 0';
  return skeleton;
}

document.querySelector('.container').appendChild(createSkeleton());

结合CSS变量

使用CSS变量控制骨架屏的样式，便于统一管理：

:root {
  --skeleton-color: #f0f0f0;
  --skeleton-highlight: #e0e0e0;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--skeleton-color) 25%,
    var(--skeleton-highlight) 50%,
    var(--skeleton-color) 75%
  );
}

响应式骨架屏

根据内容动态调整骨架屏的大小：

function responsiveSkeleton(element) {
  const rect = element.getBoundingClientRect();
  const skeleton = createSkeleton();
  skeleton.style.width = `${rect.width}px`;
  skeleton.style.height = `${rect.height}px`;
  return skeleton;
}

移除骨架屏

当内容加载完成后移除骨架效果：

function removeSkeleton() {
  const skeletons = document.querySelectorAll('.skeleton');
  skeletons.forEach(skeleton => skeleton.remove());
}

// 模拟内容加载
setTimeout(removeSkeleton, 2000);

优化性能

对于大量骨架屏元素，使用文档片段减少DOM操作：

js实现骷髅

function createMultipleSkeletons(count) {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < count; i++) {
    fragment.appendChild(createSkeleton());
  }
  document.querySelector('.container').appendChild(fragment);
}

这些方法可以根据实际需求组合使用，创建出适合项目的骨架屏效果。