怎么用純CSS實(shí)現(xiàn)iPhone價(jià)格信息圖

小編給大家分享一下怎么用純CSS實(shí)現(xiàn)iPhone價(jià)格信息圖，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

    代碼解讀

    定義dom，容器中包含3個(gè)元素，h2是圖表標(biāo)題，.back表示背景墻，.side表示側(cè)邊墻，.back和.side中都包含一個(gè)無(wú)序列表，背景墻展示價(jià)格，側(cè)邊墻展示名稱：

    <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部分，左側(cè)80%為背景墻，右側(cè)20%為側(cè)邊墻：

    .wall{

    display:grid;

    grid-template-columns:04fr1fr;

    }

    分別設(shè)置背景墻和側(cè)邊墻的背景色：

    .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布局設(shè)置對(duì)齊方式，列表垂直居中：

    .back,

    .side{

    display:flex;

    align-items:center;

    }

    .back{

    justify-content:flex-end;

    }

    ul{

    list-style-type:none;

    padding:0;

    }

    設(shè)置標(biāo)題樣式：

    h2{

    position:relative;

    width:20em;

    margin:1em;

    color:white;

    font-family:sans-serif;

    }

    設(shè)置列表項(xiàng)的高度和顏色：

    .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;

    }

    至此，整體布局完成。接下來(lái)設(shè)置左側(cè)背景墻的橫條樣式。

    橫條的寬度根據(jù)與商品的上限售價(jià)--high-price成正比，以最貴的售價(jià)--max-price作為全長(zhǎng)，其他橫條的寬度為上限售價(jià)與最高售價(jià)的百分比：

    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%);

    }

    在橫條中區(qū)分起售價(jià)--low-price的位置，比起售價(jià)高的區(qū)域填充更深的顏色：

    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)

    );

    }

    在橫線的頂端畫出一個(gè)向左的三角形：

    .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;

    }

    設(shè)置價(jià)格文字樣式：

    .backullispan{

    position:absolute;

    width:95%;

    text-align:right;

    color:white;

    font-size:1.25em;

    line-height:4em;

    font-family:sans-serif;

    }

    為各橫條增加陰影，增強(qiáng)立體感：

    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));

    }

    至此，背景墻的橫條完成。接下來(lái)設(shè)置側(cè)邊墻的樣式。

    為了制造立體效果，需要設(shè)置側(cè)邊墻的景深，并使列表傾斜：

    .side{

    perspective:1000px;

    }

    .sideul{

    transform-origin:left;

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

    }

    設(shè)置側(cè)邊墻的文字樣式：

    .wall{

    overflow:hidden;

    }

    .sideulli{

    padding-right:30%;

    text-align:right;

    color:white;

    font-family:sans-serif;

    line-height:5em;

    }

    至此，靜態(tài)視覺效果完成。最后增加入場(chǎng)動(dòng)畫效果：

    ulli{

    animation:show1slinearforwards;

    transform-origin:right;

    transform:scaleX(0);

    }

    @keyframesshow{

    to{

    transform:scaleX(1);

    }

    }

    .backulli{

    animation-delay:1s;

    }

以上是“怎么用純CSS實(shí)現(xiàn)iPhone價(jià)格信息圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！