小编给大家分享一下怎么用纯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进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
