文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-04-02 19:55

关注

小编给大家分享一下怎么用纯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价格信息图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯