css变量实现自适应步骤列表效果代码-html代码-BFW代码库

css变量实现自适应步骤列表效果代码

代码语言：html

所属分类：响应式

代码描述：css变量实现自适应步骤列表效果代码，1234四步说明列表。

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

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

<head>

  <meta charset="UTF-8">

  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
  
  
  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  --narr: 0;
  --comp: calc(1 - var(--narr));
  --wide: 1;
  min-height: 100vh;
  /* test background */
  background: repeating-linear-gradient(-45deg, gainsboro 0, gainsboro 2px, transparent 0, transparent 5px);
  /* live background *
  background: linear-gradient(90deg, rgba(#e0e0e0, .85), rgba(#fff, .85)), 
  	url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2017/kreator_rockharz_july_2018.jpg) 
  		50%/ cover fixed;/**/
  font: 400 calc(.5rem + var(--comp)*.5rem + var(--narr)*2vw)/1.5 open sans, trebuchet ms, verdana, arial, sans-serif;
}
@media (max-width: 36em) {
  html {
    --wide: 0 ;
  }
}
@medi.........完整代码请登录后点击上方下载按钮下载查看