【每日一练】168—CSS实现一款列表图效果

每日一练10个月前发布 admin
1,186 0

写在前面

今天练习里的这个图表效果在很多PPT图表是非常常见的,但是在我们的项目开发中,如果遇到这样的开发需求,如果用CSS怎么实现呢?

今天我们就一起来练习这样一个常见的开发需求,老规矩,我们还是先看最终效果:

【每日一练】168—CSS实现一款列表图效果

HTML代码:

 

<!DOCTYPE html>
<html lang=”en” >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】168—CSS实现一款列表图效果</title>
<link rel=”stylesheet” href=”style.css”>

</head>
<body>

<ul>
<li class=”card” style=”–color:#ececec; –bg-color:#E98B43″>
<div class=”icon”><i class=”fa-solid fa-house”></i></div>
<div class=”title”>01-好词好句整理</div>
<div class=”content”>春有百花秋望月,夏有凉风冬听雪。心中若无烦恼事,便是人生好时节。路再长也会有终点,夜再长也会有尽头,不管雨下得有多大,总会有停止的时候,乌云永远遮不住微笑的太阳。</div>
</li>
<li class=”card” style=”–color:#ececec; –bg-color:#C23D2A”>
<div class=”icon”><i class=”fa-solid fa-gear”></i></div>
<div class=”title”>02-好词好句整理</div>
<div class=”content”>每一次选择必须是一次超越,否则就不要选择;每一次放弃必须是一次升华,否则就不要放弃。选择靠智慧,放弃依心量,正确的合理的选择和放弃才会使得生活更加多彩。</div>
</li>
<li class=”card” style=”–color:#ececec; –bg-color:#842C2A”>
<div class=”icon”><i class=”fa-solid fa-magnifying-glass”></i></div>
<div class=”title”>03-好词好句整理</div>
<div class=”content”>你并不是一个坚强的人,但你知道在该坚强的时候一定要坚强,假如今天生活欺骗了你,不要悲伤,不要哭泣,因为明天生活还会继续欺骗你。夜深人静之时,想起那句话:胸怀,都是被委屈撑大的。</div>
</li>
<li class=”card” style=”–color:#ececec; –bg-color:#022F46″>
<div class=”icon”><i class=”fa-solid fa-chart-column”></i></i></div>
<div class=”title”>04-好词好句整理</div>
<div class=”content”>人生,需要等候。等候一阵风的拂过,等候一朵花的盛开,等候伊人的到来,等候生命爆发的强音。心灵,也需要在等候中坚守。坚守无风的日月,坚守落花的寂寞,坚守情感的空白,坚守生活的平凡。只有懂得等候与坚守,才能做到从容不迫、笑看花开、终结圣果。</div>
</li>
<li class=”card” style=”–color:#ececec; –bg-color:#032437″>
<div class=”icon”><i class=”fa-solid fa-circle-star”></i></div>
<div class=”title”>05-好词好句整理</div>
<div class=”content”>生的败笔,也多存在于选择当中:一是不会选择,盲目攀高,心神分离,难修正果;二是不坚持选择,心易旁顾,朝秦暮楚,难成其大;三是不断地选择,胸无大志,似萍戏水,如草随风,难得善终。</div>
</li>
</ul>

</body>
</html>

CSS代码:

@import url(‘https://pro.fontawesome.com/releases/v6.0.0-beta1/css/all.css’);
@import url(‘https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap’);

* { margin: 0; padding: 0; box-sizing: border-box }
body {
padding: 2rem;
font-family: ‘Roboto’, sans-serif;
min-height: 100vh;
display: grid;
place-items: center;
background-color: #060606;
}
ul{
width: min(100%, 60rem);
overflow: hidden;
margin-inline: auto;
padding-inline: clamp(1rem, 5vw, 4rem);
list-style: none;
perspective: 1000px;
display: grid;
row-gap: 0.5rem;
}
ul li.card{
position: relative;
padding-block: 1.5rem;
padding-inline: 2rem;
background-color: var(–bg-color);
background-image: linear-gradient(to right, rgb(0 0 0 / .15), transparent);
transform-style: preserve-3d;
color: var(–color);

display: grid;
grid-template: ‘icon’ ‘title’ ‘content’;
row-gap: 0.5rem;
column-gap: 2rem;
}
ul li.card::before, ul li.card::after {
–side-rotate: 60deg;
content: “”;
position: absolute;
top: 0;
height: 100%;
width: 100%;
transform-origin: calc(50% – (50% * var(–ry))) 50% ;
transform: rotateY(calc(var(–side-rotate) * var(–ry)));
background-color: inherit;
background-image: linear-gradient(calc(90deg * var(–ry)), rgb(0 0 0 / .25), rgb(0 0 0 / .5));
}
ul li.card::before {–ry: -1; right: 100% }
ul li.card::after {–ry: 1; left: 100% }

ul li.card .icon {
grid-area: icon;
display: grid;
place-items: center;
}
ul li.card .icon i {
font-size: 2rem;
}
ul li.card .title{
grid-area: title;
font-size: 1.25rem;
font-weight: 700;
text-align: center;
}
ul li.card .content{
grid-area: content;
}

@media (min-width: 30rem){
ul li.card {
grid-template: ‘icon title’ ‘icon content’;
text-align: left;
}
ul li.card .title { text-align: left }
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...