怎么用纯CSS实现iPhone价格信息图

小编给大家分享一下怎么用纯CSS实现iPhone价格信息图，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

    代码解读

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

    <divclass="wall">

    <h2>iPhonePriceComparison</h2>

    <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%,

    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;

    }

    设置标题样式：

    h2{

    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;

    }

以上是“怎么用纯CSS实现iPhone价格信息图”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！