css实现三维发光三角柱体选择花纹切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：css实现三维发光三角柱体选择花纹切换效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@600&display=swap");
*, *::before, *::after {
  padding: 0;
  margin: 0 auto;
  box-sizing: border-box;
}

body {
  font-family: "Josefin Sans", sans-serif;
  background-color: #111;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
}
body *:not(:empty) {
  transform-style: preserve-3d;
}

input {
  display: none;
}
input#earth:checked ~ .stone path.earth {
  stroke-dashoffset: 0;
}
input#earth:checked ~ .stone circle.earth {
  opacity: 1;
}
input#earth:checked ~ .stone {
  --color: #7CB342;
}
input#earth:checked ~ .buttons label[for=earth] {
  background-color: #fdc;
  color: #222;
}
input#water:checked ~ .stone path.water {
  stroke-dashoffset: 0;
}
input#water:checked ~ .stone circle.water {
  opacity: 1;
}
input#water:checked ~ .stone {
  --color: #0288D1;
}
input#water:checked ~ .buttons label[for=water] {
  background-color: #fdc;
  color: #222;
}
input#wind:checked ~ .stone path.wind {
  stroke-dashoffset: 0;
}
input#wind:checked ~ .stone circle.wind {
  opacity: 1;
}
input#wind:checked ~ .stone {
  --color: #FDD835;
}
input#wind:checked ~ .buttons label[for=wind] {
  background-color: #fdc;
  color: #222;
}
input#fire:checked ~ .stone path.fire {
  stroke-dashoffset: 0;
}
input#fire:checked ~ .stone {
  --color: #C62828;
}
input#fire:checked ~ .buttons label[for=fire] {
  background-color: #fdc;
  color: #222;
}

.buttons {
  display: flex;
  gap: 0.25em;
  transform: translateY(-10em) translateZ(15em);
  z-index: 2;
}
.buttons label {
  position: relative;
  padding: 0.5em 0.5em 0.25em;
  border: 1px solid #fdc;
  background-color: #0007;
  border-radius: 0.1em;
  transition: all 0.5s;
}

.stone {
  position: absolute;
  left: 50%;
  top: 7em;
  -webkit-animation: rotate 16s infinite linear;
          animation: rotate 16s infinite linear;
}
.stone * {
  position: absolute;
}
@-webkit-keyframes rotate {
  from {
    transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-20deg) rotateY(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotateX(-20deg) rotateY(0deg);
  }
  to {
    transform: rotateX(-20deg) rotateY(360deg);
  }
}

.face {
  width: 10em;
  height: 30em;
  background-color: #fdc;
  background-image: url("https://assets.codepen.io/1948355/cracks.svg");
  background-size: cover;
  background-position-x: var(--bpx);
  transform: translate(-50%, -50%) rotateY(var(--ry)) translateZ(2.89em);
  transform-style: preserve-3d;
  box-shadow: 0 0 4em #000a inset;
}
.face:nth-child(1) {
  --ry: 0deg;
  --bpx: 100%;
}
.face:nth-child(2) {
  --ry: 120deg;
  --bpx: 50%;
}
.face:nth-child(3) {
  --ry: 240deg;
  --bpx: 0%;
}
.face::before {
  content: "";
  position: absolute;
  width: 10em;
  height: 6em;
  background: inherit;
  box-shadow: 0 0 2em #000 inset;
  transform: rotateX(-90deg);
  transform-origin: top;
  -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
          clip-path: polygon(0 0, 100% 0, 50% 50%);
}
.face::after {
  content: "";
  position: absolute;
  bottom: 100%;
  width: 10em;
  height: 10em;
  background-image: linear-gradient(#111, #0000);
  background-color: var(--color);
  opacity: 0.5;
  transition: background-color 1s;
  transform-origin: bottom;
  -webkit-animation: scaleY 2s infinite linear;
          animation: scaleY 2s infinite linear;
}
@-webkit-keyframes scaleY {
  0% {
    transform: scaleY(0.79);
  }
  10% {
    transform: scaleY(0.35);
  }
  20% {
    transform: scaleY(0.64);
  }
  30% {
    transform: scaleY(1.16);
  }
  40% {
    transform: scaleY(0.97);
  }
  50% {
    transform: scaleY(0.28);
  }
  60% {
    transform: scaleY(0.98);
  }
  70% {
    transform: scaleY(0.26);
  }
  80% {
    transform: scaleY(0.46);
  }
  90% {
    transform: scaleY(0.29);
  }
}
@keyframes scaleY {
  0% {
    transform: scaleY(0.79);
  }
  10% {
    transform: scaleY(0.35);
  }
  20% {
    transform: scaleY(0.64);
  }
  30% {
    transform: scaleY(1.16);
  }
  40% {
    transform: scaleY(0.97);
  }
  50% {
    transform: scaleY(0.28);
  }
  60% {
    transform: scaleY(0.98);
  }
  70% {
    transform: scaleY(0.26);
  }
  80% {
    transform: scaleY(0.46);
  }
  90% {
    transform: scaleY(0.29);
  }
}
.face path {
  fill: none;
  stroke: #210;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 150 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1s;
}
.face circle {
  opacity: 0;
  transition: opacity 1s;
}
</style>



</head>

<body  >
  <div class="scene">

  <input type="radio" name="elements" value="earth" id="earth">
  <input type="radio" name="elements" value="water" id="water" checked>
  <input type="radio" name="elements" value="wind" id="wind">
  <input type="radio" name="elements" value="fire" id="fire">

  <div class="buttons">
    <label for="earth">Earth</label>
    <label for="water">Water</label>
    <label for="wind">Wind</label>
    <label for="fire">Fire</label>
  </div>

  <div class="stone">

    <div class="face">
      <svg viewbox="0 0 100 300">
        <circle class="earth water" cx="0" cy="275" r="3"/>
        <circle class="earth water" cx="0" cy="252" r="3"/>
        <circle class="earth water" cx="0" cy="229" r="3"/>
        <circle class="earth water" cx="0" cy="206" r="3"/>
        <circle class="earth water" cx="0" cy="183" r="3"/>
        <circle class="earth water" cx="0" cy="160" r="3"/>

        <circle class="wind" cx="100" cy="25" r="3"/>
        <circle class="wind" cx="100" cy="48" r="3"/>
        <circle class="wind" cx="100" cy="71" r="3"/>
        <circle class="wind" cx="100" cy="94" r="3"/>
        <circle class="wind" cx="100" cy="117" r="3"/>
        <circle class="wind" cx="100" cy="140" r="3"/>

        <path class="earth" d="M 100 275 h -85"/>
        <path class="earth" d="M 100 252 h -85"/>
        <path class="earth" d="M 100 229 h -85"/>
        <path class="earth" d="M 100 206 h -85"/>
        <path class="earth" d="M 100 183 h -85"/>
        <path class="earth" d="M 100 160 h -85"/>

        <path class="water" d="M 100 275 c -30 -20 -55 20 -85 0"/>
        <path class="water" d="M 100 252 c -30 -20 -55 20 -85 0"/>
        <path class="water" d="M 100 229 c -30 -20 -55 20 -85 0"/>
    .........完整代码请登录后点击上方下载按钮下载查看