代码解读

 

　　定义dom，容器中包含3个元素，h1是图表标题，.back表示背景墙，.side表示侧边墙，.back和.side中都包含一个无序列表，背景墙展示价格，侧边墙展示名称：

 

　　

 

　　<divclass="wall">

 

　　<h1>iPhonePriceComparison</h1>

 

　　<divclass="back">

 

　　<ul>

 

　　<liclass="xs-max"><span>$1099~$1449</span></li>

 

　　<liclass="xs"><span>$999~$1349</span></li>

 

　　<liclass="xr"><span>$749~$899</span></li>

 

　　<liclass="x"><span>$999~$1149</span></li>

 

　　</ul>

 

　　</div>

 

　　<divclass="side">

 

　　<ul>

 

　　<liclass="xs-max">iPhoneXSMax</li>

 

　　<liclass="xs">iPhoneXS</li>

 

　　<liclass="xr">iPhoneXR</li>

 

　　<liclass="x">iPhoneX</li>

 

　　</ul>

 

　　</div>

 

　　</div>

 

　　居中显示：

 

　　body{

 

　　margin:0;

 

　　height:100vh;

 

　　display:flex;

 

　　align-items:center;

 

　　justify-content:center;

 

　　background:linear-gradient(lightblue,skyblue);

 

　　}

 

　　定义容器尺寸：

 

　　.wall{

 

　　width:60em;

 

　　height:40em;

 

　　border:1emsolidrgba(255,255,255,0.5);

 

　　border-radius:2em;

 

　　font-size:10px;

 

　　}

 

　　用grid布局，把容器分成2部分，左侧80%为背景墙，右侧20%为侧边墙：

 

　　.wall{

 

　　display:grid;

 

　　grid-template-columns:04fr1fr;

 

　　}

 

　　分别设置背景墙和侧边墙的背景色：

 

　　

 

　　.back{

 

　　background:linear-gradient(

 

　　toright,

 

　　#555,

 

　　#ddd

 

　　);

 

　　}

 

　　.side{

 

　　background:

 

　　radial-gradient(

 

　　at0%50%,

 

　　/*tomato25%,

 

　　yellow90%*/

 

　　rgba(0,0,0,0.2)25%,

 

　　rgba(0,0,0,0)90%

 

　　),

 

　　linear-gradient(

 

　　toright,

 

　　#ddd,

 

　　#ccc

 

　　)

 

　　}

 

　　用flex布局设置对齐方式，列表垂直居中：

 

　　.back,

 

　　.side{

 

　　display:flex;

 

　　align-items:center;

 

　　}

 

　　.back{

 

　　justify-content:flex-end;

 

　　}

 

　　ul{

 

　　list-style-type:none;

 

　　padding:0;

 

　　}

 

　　设置标题样式：

 

　　h1{

 

　　position:relative;

 

　　width:20em;

 

　　margin:1em;

 

　　color:white;

 

　　font-family:sans-serif;

 

　　}

 

　　设置列表项的高度和颜色：

 

　　

 

　　.backul{

 

　　width:75%;

 

　　}

 

　　.sideul{

 

　　width:100%;

 

　　}

 

　　ulli{

 

　　height:5em;

 

　　background-color:var(--c);

 

　　}

 

　　ulli:nth-child(1){

 

　　--c:tomato;

 

　　}

 

　　ulli:nth-child(2){

 

　　--c:coral;

 

　　}

 

　　ulli:nth-child(3){

 

　　--c:lightsalmon;

 

　　}

 

　　ulli:nth-child(4){

 

　　--c:deepskyblue;

 

　　}

 

　　至此，整体布局完成。接下来设置左侧背景墙的横条样式。

 

　　横条的宽度根据与商品的上限售价--high-price成正比，以最贵的售价--max-price作为全长，其他横条的宽度为上限售价与最高售价的百分比：

 

　　

 

　　

 

　　ul{

 

　　display:flex;

 

　　flex-direction:column;

 

　　}

 

　　.backul{

 

　　align-items:flex-end;

 

　　}

 

　　ul{

 

　　--max-price:1449;

 

　　}

 

　　ulli.xs-max{

 

　　--high-price:1449;

 

　　}

 

　　ulli.xs{

 

　　--high-price:1349;

 

　　}

 

　　ulli.xr{

 

　　--high-price:899;

 

　　}

 

　　ulli.x{

 

　　--high-price:1149;

 

　　}

 

　　.backulli{

 

　　width:calc(var(--high-price)/var(--max-price)*100%);

 

　　}

 

　　在横条中区分起售价--low-price的位置，比起售价高的区域填充更深的颜色：

 

　　

 

　　ulli.xs-max{

 

　　--low-price:1099;

 

　　--c2:orangered;

 

　　}

 

　　ulli.xs{

 

　　--low-price:999;

 

　　--c2:tomato;

 

　　}

 

　　ulli.xr{

 

　　--low-price:749;

 

　　--c2:coral;

 

　　}

 

　　ulli.x{

 

　　--low-price:999;

 

　　--c2:dodgerblue;

 

　　}

 

　　.backulli{

 

　　--percent:calc(var(--low-price)/var(--high-price)*100%);

 

　　background:linear-gradient(

 

　　toleft,

 

　　var(--c)var(--percent),

 

　　var(--c2)var(--percent)

 

　　);

 

　　}

 

　　在横线的顶端画出一个向左的三角形：

 

　　.backulli{

 

　　position:relative;

 

　　}

 

　　.backulli::before{

 

　　content:'';

 

　　position:absolute;

 

　　width:0;

 

　　height:0;

 

　　transform:translateX(-3em);

 

　　border-right:3emsolidvar(--c2);

 

　　border-top:2.5emsolidtransparent;

 

　　border-bottom:2.5emsolidtransparent;

 

　　}

 

　　设置价格文字样式：

 

　　.backullispan{

 

　　position:absolute;

 

　　width:95%;

 

　　text-align:right;

 

　　color:white;

 

　　font-size:1.25em;

 

　　line-height:4em;

 

　　font-family:sans-serif;

 

　　}

 

　　为各横条增加阴影，增强立体感：

 

　　

 

　　ulli.xs-max{

 

　　z-index:5;

 

　　}

 

　　ulli.xs{

 

　　z-index:4;

 

　　}

 

　　ulli.xr{

 

　　z-index:3;

 

　　}

 

　　ulli.x{

 

　　z-index:2;

 

　　}

 

　　.backulli{

 

　　filter:drop-shadow(01em1emrgba(0,0,0,0.3));

 

　　}

 

　　至此，背景墙的横条完成。接下来设置侧边墙的样式。

 

　　为了制造立体效果，需要设置侧边墙的景深，并使列表倾斜：

 

　　.side{

 

　　perspective:1000px;

 

　　}

 

　　.sideul{

 

　　transform-origin:left;

 

　　transform:rotateY(-75deg)scaleX(4);

 

　　}

 

　　设置侧边墙的文字样式：

 

　　.wall{

 

　　overflow:hidden;

 

　　}

 

　　.sideulli{

 

　　padding-right:30%;

 

　　text-align:right;

 

　　color:white;

 

　　font-family:sans-serif;

 

　　line-height:5em;

 

　　}

 

　　至此，静态视觉效果完成。最后增加入场动画效果：

 

　　

 

　　ulli{

 

　　animation:show1slinearforwards;

 

　　transform-origin:right;

 

　　transform:scaleX(0);

 

　　}

 

　　@keyframesshow{

 

　　to{

 

　　transform:scaleX(1);

 

　　}

 

　　}

 

　　.backulli{

 

　　animation-delay:1s;

 

　　}






本文转载自中文网