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

css的margin-block与margin-trim布局切换示例代码

css布局实现胡桃夹子效果代码

css+div布局绘制光芒四射的可爱太阳代码

单个div+css布局实现圣诞雪花球水晶球雪景球效果代码

div+css布局实现一个立体开始按钮效果代码

单个div+css布局实现蛋糕蜡烛效果代码

单个div+css布局实现礼盒效果代码

div+css布局实现城堡建筑效果代码

div+css布局实现圣诞节装饰图案灯笼效果代码

div+css布局实现立体键盘效果代码
