css模拟一个神经网络过程代码-html代码-BFW代码库

代码语言：html
所属分类：其他
代码描述：css模拟一个神经网络过程代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

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

  
  
<style>
body{
    padding: 5vw;
    
    --col: min(40vw, 200px);
}

.vars{
      
    --inputX: 0;
    --inputY: 0;
    --output1: 0;
    --output2: 0;
    --output3: 0;
    --output4: 0;
    
    --output1bias: 0.006412765611663633;
    --output2bias: 0.007072853542676219;
    --output3bias: 0.0064746685639952214;
    --output4bias: 0.004851470988693036;
    
    --weights1-1: -0.9807254999119579;
    --weights1-2: 0.9813663133332142;
    --weights1-3: -0.9817224902785696;
    --weights1-4: 0.9817919593383302;
    --weights2-1: -0.9809082670731147;
    --weights2-2: -0.9816176935504328;
    --weights2-3: 0.9815336794202348;
    --weights2-4: 0.9815925299039976;
    
 
    /* propogate */
    --output1a: calc((var(--weights1-1) * var(--inputX)) + (var(--weights2-1) * var(--inputY)));
    --output2a: calc((var(--weights1-2) * var(--inputX)) + (var(--weights2-2) * var(--inputY)));
    --output3a: calc((var(--weights1-3) * var(--inputX)) + (var(--weights2-3) * var(--inputY)));
    --output4a: calc((var(--weights1-4) * var(--inputX)) + (var(--weights2-4) * var(--inputY)));
    
    --output1b: calc(max(0, var(--output1a)) + var(--output1bias));  
    --output2b: calc(max(0, var(--output2a)) + var(--output2bias));    
    --output3b: calc(max(0, var(--output3a)) + var(--output3bias));   
    --output4b: calc(max(0, var(--output4a)) + var(--output4bias)); 
    
    /* categorise */
    --maxOut: max(var(--output1b), var(--output2b), var(--output3b), var(--output4b));
    
    --output1c: max(calc(1 - ((var(--output1b) - var(--maxOut)) * (var(--output1b) - var(--maxOut)) * 100000000)), 0);
    --output2c: max(calc(1 - ((var(--output2b) - var(--maxOut)) * (var(--output2b) - var(--maxOut)) * 100000000)), 0);
    --output3c: max(calc(1 - ((var(--output3b) - var(--maxOut)) * (var(--output3b) - var(--maxOut)) * 100000000)), 0);
    --output4c: max(calc(1 - ((var(--output4b) - var(--maxOut)) * (var(--output4b) - var(--maxOut)) * 100000000)), 0);
    
    --color1: #00ff00;
    --color2: #990000;
    --switch1: var(--color1) calc(100% * var(--output1c)), var(--color2) 0;
    --switch1outline: rgba(0,0,0, calc(100% * var(--output1c)));
    
    --switch2: var(--color1) calc(100% * var(--output2c)), var(--color2) 0;
    --switch2outline: rgba(0,0,0, calc(100% * var(--output2c)));
    
    --switch3: var(--color1) calc(100% * var(--output3c)), var(--color2) 0;
    --switch3outline: rgba(0,0,0, calc(100% * var(--output3c)));
    
    --switch4: var(--color1) calc(100% * var(--output4c)), var(--color2) 0;
    --switch4outline: rgba(0,0,0, calc(100% * var(--output4c)));
    
    
}

.output-grid{
    display:grid;
  grid-template-columns: var(--col) var(--col);
  grid-row: auto auto;
}

.clear{
    clear: both;
}

label{
    --wh: min(10vw, 60px);
    width: var(--wh);
    height: var(--wh);
    display: block;
    background-color: #bb0000;
    float: left;
    text-align: center;
    font-size: 0.2vw;
    outline: 1px solid #666;
}

input:checked + label{
    background-color: #00ff00;
    outline: 4px solid #000;
    outline-offset: -4px;
}

input:focus + label{
    outline: 8px solid #333;
    outline-offset: -8px;
    border-radius: 16px;
}


input[type="radio"]{
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}


#x-08y08:checked ~ .vars{
    --inputX: -0.8;
    --inputY: 0.8;
}
#x-06y08:checked ~ .vars{
    --inputX: -0.6;
    --inputY: 0.8;
}
#x-04y08:checked ~ .vars{
    --inputX: -0.4;
    --inputY: 0.8;
}
#x-02y08:checked ~ .vars{
    --inputX: -0.2;
    --inputY: 0.8;
}
#x02y08:checked ~ .vars{
    --inputX: 0.2;
    --inputY: 0.8;
}
#x04y08:checked ~ .vars{
    --inputX: 0.4;
    --inputY: 0.8;
}
#x06y08:checked ~ .vars{
    --inputX: 0.6;
    --inputY: 0.8;
}
#x08y08:checked ~ .vars{
    --inputX: 0.8;
    --inputY: 0.8;
}

#x-08y06:checked ~ .vars{
    --inputX: -0.8;
    --inputY: 0.6;
}
#x-06y06:checked ~ .vars{
    --inputX: -0.6;
    --inputY: 0.6;
}
#x-04y06:checked ~ .vars{
    --inputX: -0.4;
    --inputY: 0.6;
}
#x-02y06:checked ~ .vars{
    --inputX: -0.2;
    --inputY: 0.6;
}
#x02y06:checked ~ .vars{
    --inputX: 0.2;
    --inputY: 0.6;
}
#x04y06:checked ~ .vars{
    --inputX: 0.4;
    --inputY: 0.6;
}
#x06y06:checked ~ .vars{
    --inputX: 0.6;
    --inputY: 0.6;
}
#x08y06:checked ~ .vars{
    --inputX: 0.8;
    --inputY: 0.6;
}

#x-08y04:checked ~ .vars{
    --inputX: -0.8;
    --inputY: 0.4;
}
#x-06y04:checked ~ .vars{
    --inputX: -0.6;
    --inputY: 0.4;
}
#x-04y04:checked ~ .vars{
    --inputX: -0.4;
    --inputY: 0.4;
}
#x-02y04:checked ~ .vars{
    --inputX: -0.2;
    --inputY: 0.4;
}
#x02y04:checked ~ .vars{
    --inputX: 0.2;
    --inputY: 0.4;
}
#x04y04:checked ~ .vars{
    --inputX: 0.4;
    --inputY: 0.4;
}
#x06y04:checked ~ .vars{
    --inputX: 0.6;
    --inputY: 0.4;
}
#x08y04:checked ~ .vars{
    --inputX: 0.8;
    --inputY: 0.4;
}


#x-08y02:checked ~ .vars{
    --inputX: -0.8;
    --inputY: 0.2;
}
#x-06y02:checked ~ .vars{
    --inputX: -0.6;
    --inputY: 0.2;
}
#x-04y02:checked ~ .vars{
    --inputX: -0.4;
    --inputY: 0.2;
}
#x-02y02:checked ~ .vars{
    --inputX: -0.2;
    --inputY: 0.2;
}
#x02y02:checked ~ .vars{
    --inputX: 0.2;
    --inputY: 0.2;
}
#x04y02:checked ~ .vars{
    --inputX: 0.4;
    --inputY: 0.2;
}
#x06y02:checked ~ .vars{
    --inputX: 0.6;
    --inputY: 0.2;
}
#x08y02:checked ~ .vars{
    --inputX: 0.8;
    --inputY: 0.2;
}


#x-08y-02:checked ~ .vars{
    --inputX: -0.8;
    --inputY: -0.2;
}
#x-06y-02:checked ~ .vars{
    --inputX: -0.6;
    --inputY: -0.2;
}
#x-04y-02:checked ~ .vars{
    --inputX: -0.4;
    --inputY: -0.2;
}
#x-02y-02:checked ~ .vars{
    --inputX: -0.2;
    --inputY: -0.2;
}
#x02y-02:checked ~ .vars{
    --inputX: 0.2;
    --inputY: -0.2;
}
#x04y-02:checked ~ .vars{
    --inputX: 0.4;
    --inputY: -0.2;
}
#x06y-02:checked ~ .vars{
    --inputX: 0.6;
    --inputY: -0.2;
}
#x08y-02:checked ~ .vars{
    --inputX: 0.8;
    --inputY: -0.2;
}


#x-08y-04:checked ~ .vars{
    --inputX: -0.8;
    --inputY: -0.4;
}
#x-06y-04:checked ~ .vars{
    --inputX: -0.6;
    --inputY: -0.4;
}
#x-04y-04:checked ~ .vars{
    --inputX: -0.4;
    --inputY: -0.4;
}
#x-02y-04:checked ~ .vars{
    --inputX: -0.2;
    --inputY: -0.4;
}
#x02y-04:checked ~ .vars{
    --inputX: 0.2;
    --inputY: -0.4;
}
#x04y-04:checked ~ .vars{
    --inputX: 0.4;
    --inputY: -0.4;
}
#x06y-04:checked ~ .vars{
    --inputX: 0.6;
    --inputY: -0.4;
}
#x08y-04:checked ~ .vars{
    --inputX: 0.8;
    --inputY: -0.4;
}


#x-08y-06:checked ~ .vars{
    --inputX: -0.8;
    --inputY: -0.6;
}
#x-06y-06:checked ~ .vars{
    --inputX: -0.6;
    --inputY: -0.6;
}
#x-04y-06:checked ~ .vars{
    --inputX: -0.4;
    --inputY: -0.6;
}
#x-02y-06:checked ~ .vars{
    --inputX: -0.2;
    --inputY: -0.6;
}
#x02y-06:checked ~ .vars{
    --inputX: 0.2;
    --inputY: -0.6;
}
#x04y-06:checked ~ .vars{
    --inputX: 0.4;
    --inputY: -0.6;
}
#x06y-06:checked ~ .vars{
    --inputX: 0.6;
    --inputY: -0.6;
}
#x08y-06:checked ~ .vars{
    --inputX: 0.8;
    --inputY: -0.6;
}



#x-08y-08:checked ~ .vars{
    --inputX: -0.8;
    --inputY: -0.8;
}
#x-06y-08:checked ~ .vars{
    --inputX: -0.6;
    --inputY: -0.8;
}
#x-04y-08:checked ~ .vars{
    --inputX: -0.4;
    --inputY: -0.8;
}
#x-02y-08:checked ~ .vars{
    --inputX: -0.2;
    --inputY: -0.8;
}
#x02y-08:checked ~ .vars{
    --inputX: 0.2;
    --inputY: -0.8;
}
#x04y-08:checked ~ .vars{
    --inputX: 0.4;
    --inputY: -0.8;
}
#x06y-08:checked ~ .vars{
    --inputX: 0.6;
    --inputY: -0.8;
}
#x08y-08:checked ~ .vars{
    --inputX: 0.8;
    --inputY: -0.8;
}


#out-x-1y-1{
    width: var(--col);
    height: var(--col);
    background: linear-gradient(var(--switch1));
    outline: 4px solid var(--switch1outline);
    outline-offset: -4px;
}
#out-x1y-1{
    width: var(--col);
    height: var(--col);
    background: linear-gradient(var(--switch2));
    outline: 4px solid var(--switc.........完整代码请登录后点击上方下载按钮下载查看