【每日一练】173—CSS实现响应式语录卡片效果

每日一练1年前 (2023)发布 admin
1,497 0

今天这个语录卡片效果,也是很常见的一个功能,特别是在一些推广营销页面里,我们经常会引用到用户对这个产品的一些正面评价或者体验,这个时候,我们就可以将其内容收集起来,作为营销内容里的一个部分。

我最开始见到这种效果,是在一些博客页面里,其次就是留言板上,当然,你也可以根据自己需要自由发挥其应用场景。

现在,我们还是老规矩,看最终效果样式:

【每日一练】173—CSS实现响应式语录卡片效果

HTML代码:

<!DOCTYPE html>
<html lang=”en” >
<head>
  <meta charset=”UTF-8″>
  <title>【每日一练】173—CSS实现响应式语录卡片效果</title>
  <link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div class=”card” style=”transform:rotate(-3.5470846407069967deg);”><img src=”images/20-600×300.jpg”/>
  <h2>日记</h2>
  <p>我可以爱一个人爱到不要命,但绝不会爱到不要脸。</p>
</div>
<div class=”card” style=”transform:rotate(4.797994808307811deg);”><img src=”images/20-600×300.jpg”/>
  <h2>情感</h2>
  <p>一些事,只能当记忆。一些人,只能做过客。</p>
</div>
<div class=”card” style=”transform:rotate(-3.590291702648325deg);”><img src=”images/20-600×300.jpg”/>
  <h2>句子</h2>
  <p>青春并不是指生命的某个时期,而是指一种精神状态。</p>
</div>
<div class=”card” style=”transform:rotate(2.6788126728626294deg);”><img src=”images/20-600×300.jpg”/>
  <h2>故事</h2>
  <p>人的眼睛是由黑白两部分所组成的,可是神为什么要让人只能通过黑的部分去看东西?因为人生必须透过黑暗,才能看到光明。</p>
</div>
<div class=”card” style=”transform:rotate(-3.208211947596147deg);”><img src=”images/20-600×300.jpg”/>
  <h2>日记</h2>
  <p>晚上没事的时候,喜欢一个人出去走走,一个人行走在夜色中,看着路灯下拉出的长长的影子,感觉是那么的落寞。</p>
</div>
<div class=”card” style=”transform:rotate(1.5058236457863323deg);”><img src=”images/20-600×300.jpg”/>
  <h2>心情</h2>
  <p>有些人留不留都会离开,有些话说不说都要收回。</p>
</div>
<div class=”card” style=”transform:rotate(-1.4125994215693316deg);”><img src=”images/20-600×300.jpg”/>
  <h2>故事</h2>
  <p>做人做事最好的状态就是:不刻意。不刻意自我表现,也不刻意淡泊名利;不刻意迎合,也不刻意狂狷;不刻意追逐流行,也不刻意卓尔不群。如是,则不心累,不纠结,不失望。</p>
</div>
<div class=”card” style=”transform:rotate(1.3803847537516356deg);”><img src=”images/20-600×300.jpg”/>
  <h2>日记</h2>
  <p>其实忘记一个人挺简单:不要见,不要贱。</p>
</div>
<div class=”card” style=”transform:rotate(-2.187510149029146deg);”><img src=”images/20-600×300.jpg”/>
  <h2>情感</h2>
  <p>做人做事最好的状态就是:不刻意。不刻意自我表现,也不刻意淡泊名利;不刻意迎合,也不刻意狂狷;不刻意追逐流行,也不刻意卓尔不群。如是,则不心累,不纠结,不失望。</p>
</div>
<div class=”card” style=”transform:rotate(2.438867759005774deg);”><img src=”images/20-600×300.jpg”/>
  <h2>思考</h2>
  <p>人这一生,到底在追求什么,到底什么才是最好的。真的要等到一切都已经归于平凡,才会想起,才会接受这最单纯的幸福吗?</p>
</div>
<div class=”card” style=”transform:rotate(0.6893619360579617deg);”><img src=”images/20-600×300.jpg”/>
  <h2>语录</h2>
  <p>世界上最快而又最慢,最长而又最短,最平凡而又最珍贵,最容易忽视而又最令人后悔的就是时间。</p>
</div>
<div class=”card” style=”transform:rotate(-3.3620446160385deg);”><img src=”images/20-600×300.jpg”/>
  <h2>经典</h2>
  <p>别期待他是完美的。没人是完美的。</p>
</div>
<div class=”card” style=”transform:rotate(-4.506674555529074deg);”><img src=”images/20-600×300.jpg”/>
  <h2>心情</h2>
  <p>孤独不曾远离,幸福却也无处不在,只是自己总是不愿意去拾起那些飘落,只想把希望留给那些等待的人,他们也需要心灵的美酒……</p>
</div>
<div class=”card” style=”transform:rotate(-0.17315261778177327deg);”><img src=”images/20-600×300.jpg”/>
  <h2>日记</h2>
  <p>当一个人专为自己打算的时候,他追求幸福的欲望只有在非常罕见的情况下才能得到满足,而且决不是对己对人都有利。</p>
</div>
<div class=”card” style=”transform:rotate(2.5000180574627713deg);”><img src=”images/20-600×300.jpg”/>
  <h2>文章</h2>
  <p>默默的相思,在春夏秋冬缠绕,萦绕在你离开的渡口,挥不去的影子,总在空白的脑海弥漫,却找不回点滴的真实。但心中的愁,又有谁知晓?</p>
</div>
<div class=”card” style=”transform:rotate(-2.0226664071074985deg);”><img src=”images/20-600×300.jpg”/>
  <h2>故事</h2>
  <p>人生旅途中,大家都在忙着认识各种人,以为这是在丰富生命。可最有价值的遇见,是在某一瞬间,重遇了自己,那一刻你才会懂:走遍世界,也不过是为了找到一条走回内心的路。</p>
</div>
<div class=”card” style=”transform:rotate(4.178287790945118deg);”><img src=”images/20-600×300.jpg”/>
  <h2>散文</h2>
  <p>默默的相思,在春夏秋冬缠绕,萦绕在你离开的渡口,挥不去的影子,总在空白的脑海弥漫,却找不回点滴的真实。但心中的愁,又有谁知晓?</p>
</div>
<div class=”card” style=”transform:rotate(-0.5069412614067881deg);”><img src=”images/20-600×300.jpg”/>
  <h2>情感</h2>
  <p>真正的爱情是专一的,爱情有领域是非常的狭小,它狭到只能容下两个人生存;如果同时爱上几个人,那便不能称做爱情,它只是感情上的游戏。</p>
</div>
<div class=”card” style=”transform:rotate(-1.373319977471683deg);”><img src=”images/20-600×300.jpg”/>
  <h2>心情</h2>
  <p>豁出去,就狠;狠不了,就忍。哪有中间路线?</p>
</div>
<div class=”card” style=”transform:rotate(-1.373319977471683deg);”><img src=”images/20-600×300.jpg”/>
  <h2>日记</h2>
  <p>做人做事最好的状态就是:不刻意。不刻意自我表现,也不刻意淡泊名利;不刻意迎合,也不刻意狂狷;不刻意追逐流行,也不刻意卓尔不群。如是,则不心累,不纠结,不失望。</p>
</div>
<div class=”card” style=”transform:rotate(-1.373319977471683deg);”><img src=”images/20-600×300.jpg”/>
  <h2>语录</h2>
  <p>诺言在美,终究敌不过时间的改变。</p>
</div>
<div class=”card” style=”transform:rotate(-1.373319977471683deg);”><img src=”images/20-600×300.jpg”/>
  <h2>故事</h2>
  <p>与君初相识,犹如故人归。</p>
</div>
<div class=”card” style=”transform:rotate(-1.373319977471683deg);”><img src=”images/20-600×300.jpg”/>
  <h2>日记</h2>
  <p>反复做一件事,只能证明 真的寂寞了</p>
</div>
<div class=”card” style=”transform:rotate(-1.373319977471683deg);”><img src=”images/20-600×300.jpg”/>
  <h2>散文</h2>
  <p>其实,穿越一条街根本就不难。那取决于街的那一头谁在等你</p>
</div>
</body>
</html>

CSS代码:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font: 500 100%/1.4 system-ui;
  background-color: #ccc;
}
body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0rem;
  padding: 1rem;
}
.card {
  height: fit-content;
  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 2rem;
  background: #f8f3e8;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.card > img {
  width: 100%;
  height: auto;
  aspect-ratio: 600/300;
}
.card > h2 {
  margin-top: 1rem;
  font-family: “Kalam”, cursive;
  font-weight: normal;
  font-size: 2rem;
  color: #4a4a7d;
  text-align: center;
}
.card > p {
  font-family: “Kalam”, cursive;
  font-size: 1rem;
  color: #5e5e89;
  text-align: center;
}

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

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

© 版权声明

相关文章

暂无评论

暂无评论...