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

代码语言：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: "remaining";
}

time {
  font-size: 2.5em;
  text-align: center;
  text-transform: lowercase;
}

.outer {
  position: relative;
  padding: 1.3125em;
  border-radius: 50%;
  -webkit-mask: var(--mask);
  -webkit-mask-composite: xor;
}
.outer:before, .outer:after {
  grid-row: 1;
  grid-column: 1;
  margin: -1.3125em;
  border: solid 0.1875em transparent;
  border-radius: 50%;
  --mask: conic-gradient(from -120deg, red 0% calc(var(--internal)/var(--max)*240deg), transparent 0), conic-gradient(from -120deg, red 0% calc(var(--target)/var(--max)*240deg), transparent 0);
  -webkit-mask: var(--mask);
  -webkit-mask-composite: xor;
  content: "";
}
.outer:before {
  padding: 1.125em;
  background: var(--grad) padding-box #999;
  background-blend-mode: overlay;
}
.outer:after {
  z-index: 1;
  margin: -1.5em;
  padding: 0.1875em;
  background: rgba(255, 255, 255, 0.2) content-box;
  clip-path: polygon(calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.90631) calc(50% + 50%*0.42262), calc(50% + (50% - 0.9375em)*-0.96593) calc(50% + (50% - 0.9375em)*0.25882), calc(50% + (50% - 1.875em)*-0.90631) calc(50% + (50% - 1.875em)*0.42262), calc(50% + (50% - 1.875em)*-0.86603) calc(50% + (50% - 1.875em)*0.5), calc(50% + (50% - 0.9375em)*-0.93969) calc(50% + (50% - 0.9375em)*0.34202), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.93969) calc(50% + 50%*0.34202), calc(50% + 50%*-0.96593) calc(50% + 50%*0.25882), calc(50% + (50% - 0.9375em)*-0.99619) calc(50% + (50% - 0.9375em)*0.08716), calc(50% + (50% - 1.875em)*-0.96593) calc(50% + (50% - 1.875em)*0.25882), calc(50% + (50% - 1.875em)*-0.93969) calc(50% + (50% - 1.875em)*0.34202), calc(50% + (50% - 0.9375em)*-0.98481) calc(50% + (50% - 0.9375em)*0.17365), calc(50% + 50%*-0.93969) calc(50% + 50%*0.34202), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.98481) calc(50% + 50%*0.17365), calc(50% + 50%*-0.99619) calc(50% + 50%*0.08716), calc(50% + (50% - 0.9375em)*-0.99619) calc(50% + (50% - 0.9375em)*-0.08716), calc(50% + (50% - 1.875em)*-0.99619) calc(50% + (50% - 1.875em)*0.08716), calc(50% + (50% - 1.875em)*-0.98481) calc(50% + (50% - 1.875em)*0.17365), calc(50% + (50% - 0.9375em)*-1) calc(50% + (50% - 0.9375em)*0), calc(50% + 50%*-0.98481) calc(50% + 50%*0.17365), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-1) calc(50% + 50%*0), calc(50% + 50%*-0.99619) calc(50% + 50%*-0.08716), calc(50% + (50% - 0.9375em)*-0.96593) calc(50% + (50% - 0.9375em)*-0.25882), calc(50% + (50% - 1.875em)*-0.99619) calc(50% + (50% - 1.875em)*-0.08716), calc(50% + (50% - 1.875em)*-1) calc(50% + (50% - 1.875em)*0), calc(50% + (50% - 0.9375em)*-0.98481) calc(50% + (50% - 0.9375em)*-0.17365), calc(50% + 50%*-1) calc(50% + 50%*0), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.98481) calc(50% + 50%*-0.17365), calc(50% + 50%*-0.96593) calc(50% + 50%*-0.25882), calc(50% + (50% - 0.9375em)*-0.90631) calc(50% + (50% - 0.9375em)*-0.42262), calc(50% + (50% - 1.875em)*-0.96593) calc(50% + (50% - 1.875em)*-0.25882), calc(50% + (50% - 1.875em)*-0.98481) calc(50% + (50% - 1.875em)*-0.17365), calc(50% + (50% - 0.9375em)*-0.93969) calc(50% + (50% - 0.9375em)*-0.34202), calc(50% + 50%*-0.98481) calc(50% + 50%*-0.17365), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.93969) calc(50% + 50%*-0.34202), calc(50% + 50%*-0.90631) calc(50% + 50%*-0.42262), calc(50% + (50% - 0.9375em)*-0.81915) calc(50% + (50% - 0.9375em)*-0.57358), calc(50% + (50% - 1.875em)*-0.90631) calc(50% + (50% - 1.875em)*-0.42262), calc(50% + (50% - 1.875em)*-0.93969) calc(50% + (50% - 1.875em)*-0.34202), calc(50% + (50% - 0.9375em)*-0.86603) calc(50% + (50% - 0.9375em)*-0.5), calc(50% + 50%*-0.93969) calc(50% + 50%*-0.34202), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.86603) calc(50% + 50%*-0.5), calc(50% + 50%*-0.81915) calc(50% + 50%*-0.57358), calc(50% + (50% - 0.9375em)*-0.70711) calc(50% + (50% - 0.9375em)*-0.70711), calc(50% + (50% - 1.875em)*-0.81915) calc(50% + (50% - 1.875em)*-0.57358), calc(50% + (50% - 1.875em)*-0.86603) calc(50% + (50% - 1.875em)*-0.5), calc(50% + (50% - 0.9375em)*-0.76604) calc(50% + (50% - 0.9375em)*-0.64279), calc(50% + 50%*-0.86603) calc(50% + 50%*-0.5), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.76604) calc(50% + 50%*-0.64279), calc(50% + 50%*-0.70711) calc(50% + 50%*-0.70711), calc(50% + (50% - 0.9375em)*-0.57358) calc(50% + (50% - 0.9375em)*-0.81915), calc(50% + (50% - 1.875em)*-0.70711) calc(50% + (50% - 1.875em)*-0.70711), calc(50% + (50% - 1.875em)*-0.76604) calc(50% + (50% - 1.875em)*-0.64279), calc(50% + (50% - 0.9375em)*-0.64279) calc(50% + (50% - 0.9375em)*-0.76604), calc(50% + 50%*-0.76604) calc(50% + 50%*-0.64279), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.64279) calc(50% + 50%*-0.76604), calc(50% + 50%*-0.57358) calc(50% + 50%*-0.81915), calc(50% + (50% - 0.9375em)*-0.42262) calc(50% + (50% - 0.9375em)*-0.90631), calc(50% + (50% - 1.875em)*-0.57358) calc(50% + (50% - 1.875em)*-0.81915), calc(50% + (50% - 1.875em)*-0.64279) calc(50% + (50% - 1.875em)*-0.76604), calc(50% + (50% - 0.9375em)*-0.5) calc(50% + (50% - 0.9375em)*-0.86603), calc(50% + 50%*-0.64279) calc(50% + 50%*-0.76604), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.5) calc(50% + 50%*-0.86603), calc(50% + 50%*-0.42262) calc(50% + 50%*-0.90631), calc(50% + (50% - 0.9375em)*-0.25882) calc(50% + (50% - 0.9375em)*-0.96593), calc(50% + (50% - 1.875em)*-0.42262) calc(50% + (50% - 1.875em)*-0.90631), calc(50% + (50% - 1.875em)*-0.5) calc(50% + (50% - 1.875em)*-0.86603), calc(50% + (50% - 0.9375em)*-0.34202) calc(50% + (50% - 0.9375em)*-0.93969), calc(50% + 50%*-0.5) calc(50% + 50%*-0.86603), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.34202) calc(50% + 50%*-0.93969), calc(50% + 50%*-0.25882) calc(50% + 50%*-0.96593), calc(50% + (50% - 0.9375em)*-0.08716) calc(50% + (50% - 0.9375em)*-0.99619), calc(50% + (50% - 1.875em)*-0.25882) calc(50% + (50% - 1.875em)*-0.96593), calc(50% + (50% - 1.875em)*-0.34202) calc(50% + (50% - 1.875em)*-0.93969), calc(50% + (50% - 0.9375em)*-0.17365) calc(50% + (50% - 0.9375em)*-0.98481), calc(50% + 50%*-0.34202) calc(50% + 50%*-0.93969), calc(50% + 50%*-0.86603) calc(50% + 50%*0.5), calc(50% + 50%*-0.17365) calc(50% + 50%*-0.98481), calc(50% + 50%*-0.08716) calc(50% + 50%*-0.99619), calc(50% + (50% - 0.9375em)*0.08716) calc(50% + (50% - 0.9375em)*-0.99619), calc(50% + (50% - 1.875em)*-0.08716) calc(50% + (50% - 1.875em)*-0.99619), calc(50% + (50% - 1.875em)*-0.17365) calc(50% + (50% - 1.875em)*-0.98481), calc(50% + (50% - 0.9375em)*0) calc(50% + (50% - 0.9375em)*-1), calc(50% + 50%*-0.17365) calc(50% + 50%*-0.98481), calc(50% + 50%*-.........完整代码请登录后点击上方下载按钮下载查看
css锥形渐变动画效果

网友评论0

tailwindcss布局实现个人信息卡片展示交互效果代码

css实现多种filter图片对比效果代码

svg+css实现炫酷过渡动画的开关点击切换效果代码

css-doodle实现鲜花铺满方块效果代码

css+div实现数字感谢牌效果代码

svg+css实现一个信用卡银行卡布局效果代码

css+div实现checkbox气垫板开关效果代码

tailwindcss布局实现航空飞机票电子票效果代码

div+css布局实现科技感不规则图片边框效果代码

css+div实现点状伸缩radio选择切换效果代码
