css锥形渐变动画效果-html代码-BFW代码库

css锥形渐变动画效果

代码语言：html

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,600,700&display=swap" rel="stylesheet">
<style>
@charset "UTF-8";
*, :before, :after {
  box-sizing: border-box;
}

body {
  display: grid;
  place-content: center;
  grid-gap: 1em 0.5em;
  grid-template: 8em 14.25em max-content/repeat(3, 6em);
  font: 300 1.5em/ 2 quicksand, sans-serif;
}

.val {
  text-align: center;
}
.val:before {
  display: grid;
  place-content: center;
  height: 3em;
  border-radius: 50%;
  background: var(--c);
  color: #fff;
  font-size: 2em;
  counter-reset: val var(--val);
  content: counter(val) "°";
}
.val:after {
  text-transform: capitalize;
  content: attr(data-name);
}

section {
  --grad: conic-gradient(from -120deg, #42528d, #852e6a, #d03835, #da3931, #7e2722 240deg, transparent 0%);
  --fill: linear-gradient(#ff0000, #ff0000);
  --mask: var(--fill) padding-box, var(--fill) content-box;
  display: grid;
  grid-column: 1/ span 3;
  position: relative;
  padding: 1.5em;
  height: 19em;
}
section * {
  display: grid;
  grid-row: 1;
  grid-column: 1;
}

progress {
  opacity: 0;
  clip-path: inset(50%);
}

output {
  place-content: center;
  position: relative;
  line-height: 1.25;
}
output:before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: solid 1.5em transparent;
  padding: 1.5em;
  border-radius: 50%;
  background: var(--grad) padding-box;
  -webkit-mask: var(--mask);
  -webkit-mask-composite: xor;
  content: "";
}
output:after {
  font-weight: 600;
  content:.........完整代码请登录后点击上方下载按钮下载查看