css实现冷热切换滑块滑动效果代码-html代码-BFW代码库

css实现冷热切换滑块滑动效果代码

代码语言：html

所属分类：拖放

代码描述：css实现冷热切换滑块滑动效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@property --x { syntax: "<number>"; inherits: false; initial-value: 0 }
@property --y { syntax: "<number>"; inherits: false; initial-value: 0 }

.hotcold{
  width: 80vmin;
  aspect-ratio: 3;
  position: relative;
  > i {
    position: absolute;
    --w: calc(100% / 21);
    --h: calc(100% / 7);
    width: var(--w);
    height: var(--h);

    --yd: calc(((var(--ty) - var(--y)) * var(--h)) / 100 * var(--val, 0));
    --xd: calc(((var(--tx) - var(--x)) * var(--w)) / 100 * var(--val, 0));

    top: calc(var(--y) * var(--h) + var(--yd));
    left: calc(var(--x) * var(--w) + var(--xd));
    background-color: var(--heat-color);
                
    &:nth-child(1)  { --y: 0; --x:  0; --ty: 0; --tx:  0 }
    &:nth-child(2)  { --y: 0; --x:  1; --ty: 0; --tx:  0 }
    &:nth-child(3)  { --y: 0; --x:  2; --ty: 3; --tx:  3 }
    &:nth-child(4)  { --y: 0; --x:  6; --ty: 0; --tx:  4 }
    &:nth-child(5)  { --y: 0; --x:  7; --ty: 0; --tx:  9 }
    &:nth-child(6)  { --y: 0; --x:  8; --ty: 0; --tx:  8 }
    &:nth-child(7)  { --y: 0; --x: 12; --ty: 0; --tx: 12 }
    &:nth-child(8)  { --y: 0; --x: 18; --ty: 0; --tx: 10 }
    &:nth-child(9)  { --y: 0; --x: 19; --ty: 0; --tx: 11 }

    &:nth-child(10) { --y: 1; --x:  0; --ty: 1; --tx:  0 }
    &:nth-child(11) { --y: 1; --x:  6; --ty: 1; --tx:  4 }
    &:nth-child(12) { --y: 1; --x:  8; --ty: 1; --tx:  8 }
    &:nth-child(13) { --y: 1; --x: 12; --ty: 1; --tx: 12 }
    &:nth-child(14) { --y: 1; --x: 18; --ty: 0; --tx: 16 }
    &:nth-child(15) { --y: 1; --x: 20; --ty: 0; --tx: 18 }

    &:nth-child(16) { --y: 2; --x:  0; --ty: 2; --tx:  0 }
    &:nth-child(17) { --y: 2; --x:  6; --ty: 2; --tx:  4 }
    &:nth-child(18) { --y: 2; --x:  8; --ty: 2; --tx:  8 }
    &:nth-child(19) { --y: 2; --x: 12; --ty: 2; --tx: 12 }
    &:nth-child(20) { --y: 2; --x: 18; --ty: 0; --tx: 17 }
    &:nth-child(21) { --y: 2; --x: 20; --ty: 0; --tx: 19 }

    &:nth-child(22) { --y: 3; --x:  0; --ty: 3; --tx:  0 }
    &:nth-child(23) { --y: 3; --x:  6; --ty: 3; --tx:  4 }
    &:nth-child(24) { --y: 3; --x:  8; --ty: 3; --tx:  8 }
    &:nth-child(25) { --y: 3; --x: 12; --ty: 3; --tx: 12 }
    &:nth-child(26) { --y: 3; --x: 18; --ty: 1; --tx: 18 }
    &:nth-child(27) { .........完整代码请登录后点击上方下载按钮下载查看