今天这个语录卡片效果，也是很常见的一个功能，特别是在一些推广营销页面里，我们经常会引用到用户对这个产品的一些正面评价或者体验，这个时候，我们就可以将其内容收集起来，作为营销内容里的一个部分。
我最开始见到这种效果，是在一些博客页面里，其次就是留言板上，当然，你也可以根据自己需要自由发挥其应用场景。
现在，我们还是老规矩，看最终效果样式：
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;}
以上就是【每日一练】的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
【web前端开发】一个专业而懂你的前端开发技术研究学习交流平台，每天不定时分享前端技术内容与案例，编程图书与课程，前端开发工具等学习资源，我们坚持每天学习一点点，每天进步一点点，关注我们，一起学习成长进步。
同名公众号【web前端开发】
