溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎么用純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%,
/*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;
}
設置標題樣式：
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價格信息圖”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
