资讯专栏INFORMATION COLUMN

前端每日实战:138# 视频演示如何用纯 CSS 创作一张 iPhone 价格信息图

OnlyLing / 2592人阅读

摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。接下来设置左侧背景墙的横条样式。

效果预览

按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。

https://codepen.io/comehope/pen/OorLGZ

可交互视频

此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

https://scrimba.com/p/pEgDAM/cRB22cV

源代码下载

每日前端实战系列的全部源代码请从 github 下载:

https://github.com/comehope/front-end-daily-challenges

代码解读

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

</>复制代码

  1. iPhone Price Comparison

    • $1099 ~ $1449
    • $999 ~ $1349
    • $749 ~ $899
    • $999 ~ $1149
    • iPhone XS Max
    • iPhone XS
    • iPhone XR
    • iPhone X

居中显示:

</>复制代码

  1. body {
  2. margin: 0;
  3. height: 100vh;
  4. display: flex;
  5. align-items: center;
  6. justify-content: center;
  7. background: linear-gradient(lightblue, skyblue);
  8. }

定义容器尺寸:

</>复制代码

  1. .wall {
  2. width: 60em;
  3. height: 40em;
  4. border: 1em solid rgba(255, 255, 255, 0.5);
  5. border-radius: 2em;
  6. font-size: 10px;
  7. }

用 grid 布局,把容器分成 2 部分,左侧80%为背景墙,右侧20%为侧边墙:

</>复制代码

  1. .wall {
  2. display: grid;
  3. grid-template-columns: 0 4fr 1fr;
  4. }

分别设置背景墙和侧边墙的背景色:

</>复制代码

  1. .back {
  2. background: linear-gradient(
  3. to right,
  4. #555,
  5. #ffffd
  6. );
  7. }
  8. .side {
  9. background:
  10. radial-gradient(
  11. at 0% 50%,
  12. /* tomato 25%,
  13. yellow 90% */
  14. rgba(0, 0, 0, 0.2) 25%,
  15. rgba(0, 0, 0, 0) 90%
  16. ),
  17. linear-gradient(
  18. to right,
  19. #ffffd,
  20. #ccc
  21. )
  22. }

用 flex 布局设置对齐方式,列表垂直居中:

</>复制代码

  1. .back,
  2. .side {
  3. display: flex;
  4. align-items: center;
  5. }
  6. .back {
  7. justify-content: flex-end;
  8. }
  9. ul {
  10. list-style-type: none;
  11. padding: 0;
  12. }

设置标题样式:

</>复制代码

  1. h1 {
  2. position: relative;
  3. width: 20em;
  4. margin: 1em;
  5. color: white;
  6. font-family: sans-serif;
  7. }

设置列表项的高度和颜色:

</>复制代码

  1. .back ul {
  2. width: 75%;
  3. }
  4. .side ul {
  5. width: 100%;
  6. }
  7. ul li {
  8. height: 5em;
  9. background-color: var(--c);
  10. }
  11. ul li:nth-child(1) {
  12. --c: tomato;
  13. }
  14. ul li:nth-child(2) {
  15. --c: coral;
  16. }
  17. ul li:nth-child(3) {
  18. --c: lightsalmon;
  19. }
  20. ul li:nth-child(4) {
  21. --c: deepskyblue;
  22. }

至此,整体布局完成。接下来设置左侧背景墙的横条样式。
横条的宽度根据与商品的上限售价 --high-price 成正比,以最贵的售价 --max-price 作为全长,其他横条的宽度为上限售价与最高售价的百分比:

</>复制代码

  1. ul {
  2. display: flex;
  3. flex-direction: column;
  4. }
  5. .back ul {
  6. align-items: flex-end;
  7. }
  8. ul {
  9. --max-price: 1449;
  10. }
  11. ul li.xs-max {
  12. --high-price: 1449;
  13. }
  14. ul li.xs {
  15. --high-price: 1349;
  16. }
  17. ul li.xr {
  18. --high-price: 899;
  19. }
  20. ul li.x {
  21. --high-price: 1149;
  22. }
  23. .back ul li {
  24. width: calc(var(--high-price) / var(--max-price) * 100%);
  25. }

在横条中区分起售价 --low-price 的位置,比起售价高的区域填充更深的颜色:

</>复制代码

  1. ul li.xs-max {
  2. --low-price: 1099;
  3. --c2: orangered;
  4. }
  5. ul li.xs {
  6. --low-price: 999;
  7. --c2: tomato;
  8. }
  9. ul li.xr {
  10. --low-price: 749;
  11. --c2: coral;
  12. }
  13. ul li.x {
  14. --low-price: 999;
  15. --c2: dodgerblue;
  16. }
  17. .back ul li {
  18. --percent: calc(var(--low-price) / var(--high-price) * 100%);
  19. background: linear-gradient(
  20. to left,
  21. var(--c) var(--percent),
  22. var(--c2) var(--percent)
  23. );
  24. }

在横线的顶端画出一个向左的三角形:

</>复制代码

  1. .back ul li {
  2. position: relative;
  3. }
  4. .back ul li::before {
  5. content: "";
  6. position: absolute;
  7. width: 0;
  8. height: 0;
  9. transform: translateX(-3em);
  10. border-right: 3em solid var(--c2);
  11. border-top: 2.5em solid transparent;
  12. border-bottom: 2.5em solid transparent;
  13. }

设置价格文字样式:

</>复制代码

  1. .back ul li span {
  2. position: absolute;
  3. width: 95%;
  4. text-align: right;
  5. color: white;
  6. font-size: 1.25em;
  7. line-height: 4em;
  8. font-family: sans-serif;
  9. }

为各横条增加阴影,增强立体感:

</>复制代码

  1. ul li.xs-max {
  2. z-index: 5;
  3. }
  4. ul li.xs {
  5. z-index: 4;
  6. }
  7. ul li.xr {
  8. z-index: 3;
  9. }
  10. ul li.x {
  11. z-index: 2;
  12. }
  13. .back ul li {
  14. filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.3));
  15. }

至此,背景墙的横条完成。接下来设置侧边墙的样式。
为了制造立体效果,需要设置侧边墙的景深,并使列表倾斜:

</>复制代码

  1. .side {
  2. perspective: 1000px;
  3. }
  4. .side ul {
  5. transform-origin: left;
  6. transform: rotateY(-75deg) scaleX(4);
  7. }

设置侧边墙的文字样式:

</>复制代码

  1. .wall {
  2. overflow: hidden;
  3. }
  4. .side ul li {
  5. padding-right: 30%;
  6. text-align: right;
  7. color: white;
  8. font-family: sans-serif;
  9. line-height: 5em;
  10. }

至此,静态视觉效果完成。最后增加入场动画效果:

</>复制代码

  1. ul li {
  2. animation: show 1s linear forwards;
  3. transform-origin: right;
  4. transform: scaleX(0);
  5. }
  6. @keyframes show {
  7. to {
  8. transform: scaleX(1);
  9. }
  10. }
  11. .back ul li {
  12. animation-delay: 1s;
  13. }

大功告成!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54666.html

相关文章

  • 前端每日实战138# 视频演示何用 CSS 创作一张 iPhone 价格信息

    摘要:效果预览按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。可交互视频此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。接下来设置左侧背景墙的横条样式。 showImg(https://segmentfault.com/img/bVbhdbh?w=400&h=300); 效果预览 按下右侧的点击预览按钮可以在当前页面预览,点击链接可以全屏预览。 https://co...

    shiweifu 评论0 收藏0
  • 前端每日实战 2018 年 9 月份项目汇总(共 26 个项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(...

    lavnFan 评论0 收藏0
  • 前端每日实战 2018 年 9 月份项目汇总(共 26 个项目)

    摘要:过往项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份项目汇总共个项目年月份发布的项目前端每日实战专栏每天分解一个前端项目,用视频记录编码过程,再配合详细的代码解读,是学习前端开发的活的参考书 过往项目 2018 年 8 月份项目汇总(共 29 个项目) 2018 年 7 月份项目汇总(共 29 个项目) 2018 年 6 月份项目汇总(...

    whatsns 评论0 收藏0

发表评论

0条评论

OnlyLing

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<