Html——选项框、立方体与选项框

这篇文章距离上次修改已过203天，其中的内容可能已经有所变动。

在HTML中，创建选项框（select box）和立方体可以使用HTML和CSS。以下是一个简单的例子，展示如何用HTML和CSS创建选项框和模拟立方体。

HTML部分：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>选项框与立方体示例</title>
<style>
  .cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite;
  }
 
  .face {
    position: absolute;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
 
  .face-1 { background: red; }
  .face-2 { background: yellow; }
  .face-3 { background: blue; }
  .face-4 { background: green; }
  .face-5 { background: indigo; }
  .face-6 { background: purple; }
 
  @keyframes rotate {
    0% {
      transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }
</style>
</head>
<body>
 
<div class="cube">
  <div class="face face-1">正面</div>
  <div class="face face-2">前面</div>
  <div class="face face-3">后面</div>
  <div class="face face-4">上面</div>
  <div class="face face-5">下面</div>
  <div class="face face-6">左面</div>
</div>
 
<select id="selectBox">
  <option value="red">红色</option>
  <option value="yellow">黄色</option>
  <option value="blue">蓝色</option>
  <option value="green">绿色</option>
  <option value="indigo">紫色</option>
  <option value="purple">紫色</option>
</select>
 
<script>
  const selectBox = document.getElementById('selectBox');
  selectBox.addEventListener('change', function() {
    const color = selectBox.value;
    document.documentElement.style.setProperty('--selected-color', color);
  });
</script>
 
</body>
</html>

CSS部分：




:root {
  --selected-color: red;
}
 
.cube {
  /* 使用CSS变量来设置立方体颜色 */
  --cube-color: var(--selected-color);
  /* ... 其他样式 ... */
}

JavaScript部分：




const selectBox = document.getElementById('selectBox');
selectBox.addEventListener('change', function() {
  const color = selectBox.value;
  document.documentElement.style.setProperty('--selected-color', color);
});

这个例

Html——选项框、立方体与选项框

评论已关闭

推荐阅读