送你一张船票h5实现

H5船票动画实现方法

H5船票动画效果可以通过CSS3动画和JavaScript交互实现。以下是一个简单的实现方案：

HTML结构

<div class="ticket-container">
  <div class="ticket">
    <div class="ticket-front">
      <!-- 船票正面内容 -->
    </div>
    <div class="ticket-back">
      <!-- 船票背面内容 -->
    </div>
  </div>
</div>

CSS样式

.ticket-container {
  perspective: 1000px;
  width: 300px;
  height: 180px;
  margin: 0 auto;
}

.ticket {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.ticket-front, .ticket-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.ticket-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
}

.ticket.flipped {
  transform: rotateY(180deg);
}

JavaScript交互

document.querySelector('.ticket').addEventListener('click', function() {
  this.classList.toggle('flipped');
});

进阶实现方案

对于更复杂的船票效果，可以结合Canvas或SVG实现：

Canvas绘制船票

const canvas = document.getElementById('ticket-canvas');
const ctx = canvas.getContext('2d');

// 绘制船票背景
ctx.fillStyle = '#f5f5f5';
ctx.fillRect(0, 0, 300, 180);

// 绘制船票边缘虚线
ctx.setLineDash([5, 3]);
ctx.strokeStyle = '#999';
ctx.strokeRect(10, 10, 280, 160);

// 添加文字内容
ctx.fillStyle = '#333';
ctx.font = 'bold 20px Arial';
ctx.fillText('泰坦尼克号船票', 80, 50);

注意事项

1. 移动端适配需要添加viewport meta标签

   <meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 性能优化建议使用will-change属性

   .ticket {
   will-change: transform;
   }

3. 对于复杂动画可以考虑使用GSAP或anime.js等动画库

4. 添加音效可以增强交互体验

   

   const flipSound = new Audio('flip-sound.mp3');
   document.querySelector('.ticket').addEventListener('click', function() {
   flipSound.play();
   this.classList.toggle('flipped');
   });