有没有炫酷的html代码

当然有！以下是一些炫酷的HTML代码示例：

1. CSS动画旋转的3D立方体：

<div class="cube">
  <div class="face front">Front</div>
  <div class="face back">Back</div>
  <div class="face left">Left</div>
  <div class="face right">Right</div>
  <div class="face top">Top</div>
  <div class="face bottom">Bottom</div>
</div>

<style>
.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d;
  transform: rotateX(30deg) rotateY(30deg);
  animation: spin 3s linear infinite;
}
.face {
  width: 100%;
  height: 100%;
  position: absolute;
  border: 1px solid black;
  text-align: center;
  line-height: 100px;
  font-size: 24px;
}
.front {
  transform: translateZ(50px);
}
.back {
  transform: rotateY(180deg) translateZ(50px);
}
.left {
  transform: rotateY(-90deg) translateZ(50px);
}
.right {
  transform: rotateY(90deg) translateZ(50px);
}
.top {
  transform: rotateX(90deg) translateZ(50px);
}
.bottom {
  transform: rotateX(-90deg) translateZ(50px);
}
@keyframes spin {
  0% { transform: rotateX(30deg) rotateY(30deg); }
  100% { transform: rotateX(390deg) rotateY(390deg); }
}
</style>

2. 纯CSS实现的扁平化按钮：

<button class="flat-button">Click Me!</button>

<style>
.flat-button {
  display: inline-block;
  padding: 0.5em 1em;
  text-align: center;
  text-decoration: none;
  color: white;
  background-color: #2ecc71;
  border: none;
  border-radius: 3px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.1s ease-out;
}
.flat-button:hover {
  background-color: #27ae60;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  transform: translateY(-1px);
}
.flat-button:active {
  background-color: #229954;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
  transform: translateY(1px);
}
</style>

3. 带有粒子效果的背景：

<div class="particle-bg">
  <h1>Hello, World!</h1>
</div>

<style>
.particle-bg {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.particle-bg h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5em;
  font-weight: bold;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  color: white;
}
.particle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  opacity: 0.5;
  background-color: white;
  animation: particle 5s infinite;
}
@keyframes particle {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  100% {
    transform: translate(100vw, 100vh) rotate(720deg);
  }
}
</style>

<script>
for (var i = 0; i < 100; i++) {
  var particle = document.createElement('div');
  particle.className = 'particle';
  particle.style.left = Math.random() * 100 + '%';
  particle.style.top = Math.random() * 100 + '%';
  particle.style.animationDuration = Math.random() * 5 + 2 + 's';
  document.querySelector('.particle-bg').appendChild(particle);
}
</script>

这些代码示例只是冰山一角，只要你有想象力和耐心，就可以创造更多炫酷的HTML效果！