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 ;
  }
}
@media (max-width: 20em) {
  html {
    --narr: 1 ;
  }
}

body {
  overflow-x: hidden;
}

p {
  --parity: 0;
  --sign: calc(1 - 2*var(--parity));
  display: flex;
  align-items: center;
  position: relative;
  margin: 6.25em auto 0;
  padding: 1em;
  min-width: 160px;
  min-height: 6.5em;
  width: calc(var(--comp)*80% + var(--narr)*100%);
  max-width: 35em;
  background: linear-gradient(90deg, #fcfcfc, #ececec);
  counter-increment: idx;
}
p, p:before, p:after .........完整代码请登录后点击上方下载按钮下载查看