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: "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%*-.........完整代码请登录后点击上方下载按钮下载查看
网友评论0