【源代码】马里奥按钮悬浮动画效果html+css实现

2026-01-06 13:25:04 Html 68 次阅读
html

演示效果

代码如下：
<button>
  <div class="mario-icon">
    <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
      <circle cx="32" cy="34" r="14" fill="#ffcc99" />
      <circle cx="16" cy="38" r="5" fill="#ffcc99" />
      <path d="M16 35 A 3 3 0 0 0 16 41" fill="none" stroke="#e6b88a" stroke-width="1" />
      <path d="M12 28 C 12 18, 52 18, 52 28 L 52 30 L 12 30 Z" fill="#ff0000" />
      <path d="M10 28 Q 32 18 54 28 Q 56 32 50 32 L 14 32 Q 8 32 10 28" fill="#d30000" />
      <circle cx="32" cy="24" r="6" fill="white" />
      <path d="M28 26 L 28 21 L 30 21 L 32 23 L 34 21 L 36 21 L 36 26 L 34 26 L 34 23 L 32 25 L 30 23 L 30 26 Z" fill="#ff0000" />
      <path d="M19 32 Q 18 36 21 40 L 21 32 Z" fill="#4d2600" />
      <!-- 眼睛部分 -->
      <ellipse cx="28" cy="34" rx="2.5" ry="4" fill="white" />
      <ellipse cx="28" cy="34" rx="1.2" ry="2.5" fill="#0000ff" />
      <circle cx="28" cy="33" r="0.8" fill="white" />
      <ellipse cx="38" cy="34" rx="2.5" ry="4" fill="white" />
      <ellipse cx="38" cy="34" rx="1.2" ry="2.5" fill="#0000ff" />
      <circle cx="38" cy="33" r="0.8" fill="white" />
      <ellipse cx="32" cy="40" rx="6" ry="4.5" fill="#ffcc99" /> 
      <path d="M28 42 Q 32 45 36 42" fill="none" stroke="#e6b88a" stroke-width="1" opacity="0.5"/>
      <path d="M22 42 Q 24 38 27 42 Q 32 39 37 42 Q 40 38 42 42 Q 42 45 38 45 Q 32 47 26 45 Q 22 45 22 42 Z" fill="#000000" />
    </svg>
  </div>
  <span class="now">Let's Go!</span>
  <span class="play">MARIO</span>
</button>

<style>
button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0; /* 这里的布局改由内部元素控制 */
  color: white;
  text-shadow: 1px 1px 0px #000, 2px 2px 0px rgba(0,0,0,0.3);
  text-transform: uppercase;
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow: 0 4px 0 #b30000;
  letter-spacing: 1.5px;
  font-weight: 900;
  font-size: 13px;
  background: linear-gradient(180deg, #ff3e3e 0%, #d10000 100%);
  border-radius: 50px;
  position: relative; /* 关键：相对定位 */
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  font-family: 'Verdana', sans-serif;
  height: 56px;
  width: 180px; /* 固定宽度以保证绝对定位的对齐 */
}

button:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 #b30000;
}

.mario-icon {
  width: 70px;
  height: 70px;
  filter: drop-shadow(2px 2px 0px rgba(0,0,0,0.2));
  transition: all 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  z-index: 1; /* 图标在底层 */
  transform-origin: 52% 53%; /* 聚焦眼睛 */
  
  /* 初始状态：向左偏移一点，为了给右边的文字腾出视觉空间 */
  transform: translateX(-20px); 
}

/* MARIO 文字 */
.play {
  position: absolute;
  right: 35px; /* 初始位置 */
  transition: all 0.4s ease;
  z-index: 2;
}

/* Let's Go 文字 */
.now {
  position: absolute;
  left: 50%; /* 居中定位 */
  top: 50%;
  transform: translate(-150%, -50%) skewX(-10deg); /* 初始在左侧屏幕外 */
  transition: all 0.4s ease;
  z-index: 3; /* 文字在最上层 */
  color: #fff200; 
  font-style: italic;
  font-weight: 900;
  opacity: 0;
  width: 100%; /* 确保文字居中 */
  text-align: center;
}

/* --- 悬浮状态 --- */

button:hover {
  background: linear-gradient(180deg, #0099ff 0%, #0066cc 100%);
  box-shadow: 0 4px 0 #004c99;
}

/* 1. 图标：回到正中间 (translateX: 0) 并放大 */
button:hover .mario-icon {
  transform: translateX(0) scale(2.6);
}

/* 2. 原文字：滑出 */
button:hover .play {
  transform: translateX(200%);
  opacity: 0;
}

/* 3. 新文字：滑入居中 */
button:hover .now {
  transform: translate(-50%, -50%) skewX(-10deg); /* 完美居中 */
  opacity: 1;
}
</style>

💬 评论

0/200