当前位置：首页 > JavaScript

js css实现冰墩墩

2026-03-01 23:00:56JavaScript

以下是通过JavaScript和CSS实现冰墩墩效果的方法，结合动画和样式设计：

基础HTML结构

<div class="bing-dwen-dwen">
  <div class="face"></div>
  <div class="body"></div>
  <div class="eyes"></div>
  <div class="mouth"></div>
</div>

CSS样式设计

.bing-dwen-dwen {
  position: relative;
  width: 200px;
  height: 220px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.face {
  position: absolute;
  width: 180px;
  height: 160px;
  background: linear-gradient(135deg, #a5def1 0%, #e0f7fa 100%);
  border-radius: 50%;
  top: 20px;
  left: 10px;
}

.body {
  position: absolute;
  width: 150px;
  height: 180px;
  background-color: #fff;
  border-radius: 50%;
  bottom: 0;
  left: 25px;
}

.eyes {
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
  top: 70px;
  left: 50px;
}

.eyes::after {
  content: '';
  position: absolute;
  width: 30px;
  height: 40px;
  background-color: #333;
  border-radius: 50%;
  left: 70px;
}

.mouth {
  position: absolute;
  width: 40px;
  height: 10px;
  background-color: #ff6b6b;
  border-radius: 10px;
  top: 120px;
  left: 80px;
}

JavaScript动画实现

// 眨眼动画
const eyes = document.querySelector('.eyes');
setInterval(() => {
  eyes.style.height = '5px';
  setTimeout(() => {
    eyes.style.height = '40px';
  }, 200);
}, 3000);

// 左右摇摆动画
const bingDwenDwen = document.querySelector('.bing-dwen-dwen');
let angle = 0;
setInterval(() => {
  angle = angle > 10 ? -10 : 10;
  bingDwenDwen.style.transform = `rotate(${angle}deg)`;
}, 500);

进阶效果增强

添加彩虹光晕效果：

.bing-dwen-dwen::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 240px;
  border-radius: 50%;
  background: linear-gradient(45deg, 
    #ff0000, #ff7f00, #ffff00, #00ff00, 
    #0000ff, #4b0082, #9400d3);
  z-index: -1;
  opacity: 0.3;
  filter: blur(10px);
  animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

响应式调整

通过JavaScript动态调整大小：

function resizeBingDwenDwen() {
  const container = document.querySelector('.bing-dwen-dwen');
  const size = Math.min(window.innerWidth, window.innerHeight) * 0.5;
  container.style.width = `${size}px`;
  container.style.height = `${size * 1.1}px`;
}

window.addEventListener('resize', resizeBingDwenDwen);
resizeBingDwenDwen();

以上代码组合可以创建一个具有基本特征和动画效果的冰墩墩形象，通过CSS控制外观样式，JavaScript实现动态交互效果。

js css实现冰墩墩