纯css绘制宝鼎效果-html代码-BFW代码库

代码语言：html

代码描述：纯css绘制宝鼎效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
* {
  box-sizing: border-box;
  -webkit-transition: background 0.15s ease, box-shadow 0.15s ease;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}
:root {
  --cauldron-hue: 34;
  --potion-hue: 120;
  --size: 200;
  --bg: #111;
}
label {
  font-weight: bold;
  color: #fcfcfc;
  margin-bottom: 0.5rem;
}
[type='checkbox'] {
  margin-bottom: 2rem;
}
:checked ~ .cauldron {
  background: var(--cauldron-color);
}
:checked ~ .cauldron .cauldron__opening {
  background: var(--potion-color);
  box-shadow: none;
}
:checked ~ .cauldron:after,
:checked ~ .cauldron:before {
  background: var(--potion-color);
  box-shadow: none;
}
:checked ~ .cauldron:before {
  background: transparent;
}
:checked ~ .cauldron .cauldron__handle {
  background: var(--rim-color);
}
:checked ~ .cauldron .cauldron__eye {
  box-shadow: none;
}
:checked ~ .cauldron .cauldron__mouth {
  box-shadow: none;
}
:checked ~ .cauldron .cauldron__foot {
  background: var(--inner-rim-color);
}
:checked ~ .cauldron .cauldron__bubble {
  background: var(--potion-color);
}
body {
  -webkit-box-align: center;
          align-items: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  min-height: 100vh;
  background: var(--bg);
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
}
.cauldron {
  --rim-color: hsl(var(--cauldron-hue), 100%, 60%);
  --inner-rim-color: hsl(var(--cauldron-hue), 100%, 25%);
  --potion-color: hsl(var(--potion-hue), 100%, 50%);
  --cauldron-color: hsl(var(--cauldron-hue), 100%, 50%);
  --darkness: hsl(var(--cauldron-hue), 100%, 10%);
  --lightness: hsl(var(--cauldron-hue), 100%, 85%);
  --potion-stain-light: hsl(var(--potion-hue), 100%, 70%);
  --potion-stain-dark: hsl(var(--potion-hue), 100%, 30%);
  border-radius: 100%;
  height: calc(var(--size) * 1px);
  width: calc(var(--size) * 1px);
  background: radial-gradient(25% 25% at 25% 55%, var(--rim-color), transparent), radial-gradient(100% 100% at -2% 50%, transparent, transparent 92%, var(--cauldron-color)), radial-gradient(100% 100% at -5% 50%, transparent, transparent 80%, var(--darkness)), linear-gradient(310deg, var(--inner-rim-color) 25%, transparent), var(--cauldron-color);
  position: relative;
}
.cauldron__opening {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 35%;
  background: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--potion-stain-dark))), var(--potion-color);
  background: linear-gradient(90deg, transparent, var(--potion-stain-dark)), var(--potion-color);
  border: calc(var(--size) * 0.05px) solid var(--rim-color);
  box-shadow: 0 0px calc(var(--size) * 0.05px) calc(var(--size) * 0.005px) var(--rim-color) inset, 0 calc(var(--size) * 0.025px) 0 calc(var(--size) * 0.025px) var(--inner-rim-color) inset, 0 10px 20px 0px var(--darkness), 0 10px 20px -10px var(--inner-rim-color);
  border-radius: 100%;
}
.cauldron__opening:after {
  content: '';
  position: absolute;
  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(var(--potion-stain-dark)), color-stop(transparent), color-stop(var(--potion-stain-light)), color-stop(transparent), color-stop(var(--potion-stain-dark)), to(transparent));
  background: linear-gradient(90deg, transparent, var(--potion-stain-dark), transparent, var(--potion-stain-light), transparent, var(--potion-stain-dark), transparent);
  border-radius: 100%;
  top: 8px;
  right: 0;
  bottom: 4px;
  left: 0;
}
.cauldron__opening:before {
  content: '';
  position: absolute;
  box-shadow: 0 0 calc(var(--size) * 0.025px) 0 var(--darkness) inset, 0 -1px calc(var(--size) * 0.015px) 0px var(--darkness) inset, 0 2px calc(var(--size) * 0.015px) 0px var(--lightness) inset, 0 0 calc(var(--size) * 0.075px) calc(var(--size) * 0.05px) var(--rim-color) inset;
  border-radius: 100%;
  top: calc(var(--size) * -0.05px);
  right: calc(var(--size) * -0.05px);
  bottom: calc(var(--size) * -0.05px);
  left: calc(var(--size) * -0.05px);
}
.cauldron__handle {
  height: calc(var(--size) * 0.3px);
  width: calc(var(--size) * 0.3px);
  position: absolute;
  background: -webkit-gradient(linear, left bottom, left top, from(var(--darkness)), to(transparent)), radial-gradient(100% 100% at 50% 50%, var(--inner-rim-color), transparent), var(--rim-color);
  background: linear-gradient(0deg, var(--darkness), transparent), radial-gradient(100% 100% at 50% 50%, var(--inner-rim-color), transparent), var(--rim-color);
  border-radius: 100%;
  top: 30%;
  z-index: -1;
}
.cauldron__handle:after {
  content: '';
  background: var(--bg);
  height: 50%;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  border-radius: 100%;
}
.cauldron__handle--left {
  left: -14%;
}
.cauldron__handle--right {
  right: -14%;
}
.cauldron__foot {
  background: var(--inner-rim-color);
  position: absolute;
  z-index: -1;
  height: calc(var(--size) * 0.3px);
  width: calc(var(--size) * 0.3px);
  bottom: -5%;
  border-radius: 200% 0 200% 50%/200% 0 200% 50%;
}
.cauldron__foot--left {
  left: 10%;
  background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness) 75%), var(--inner-rim-color);
}
.cauldron__foot--right {
  right: 10%;
  background: radial-gradient(110% 110% at 25% 50%, transparent, var(--darkness)), var(--inner-rim-color);
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg);
}
.cauldron__bubble {
  height: calc(var(--size) * 0.2px);
  width: calc(var(--size) * 0.2px);
  position: absolute;
  border-radius: 100%;
  top: 0;
  left: calc(var(--x) * 1%);
  border: 1px solid var(--potion-stain-light);
  background: radial-gradient(100% 115% at 25% 25%, #fff, transparent 33%), radial-gradient(15% 15% at 75% 75%, var(--cauldron-color), transparent), radial-gradient(100% 100% at 50% 25%, transparent, var(--potion-color) 98%);
  pointer-events: none;
  -webkit-animation: rise calc(var(--speed) * 1s) calc(var(--delay) * -1s) infinite ease;
          animation: rise calc(var(--speed) * 1s) calc(var.........完整代码请登录后点击上方下载按钮下载查看