🌟如何让内容呈现更加吸引人成为设计师和开发者的挑战。大气实用的HTML5/CSS动画卡片提供了一种解决方案，它结合了视觉美感和动态效果，使得信息展示不仅大气而且具有高度的实用性。本文将探讨如何利用HTML5和CSS的动画特性，设计出既美观又功能丰富的动画卡片，提升用户体验。
完整代码
HTML
<section class="creative-cards style-one"> <div class="container"> <div class="row"> <div class="card-column"> <div class="card-details"> <div class="card-icons"> <img class="light-icon" src="https://imgpanda.com/upload/ib/1yIWjyG41o.png" alt="icon" /> </div> <h3><a href="https://www.fiverr.com/aliali44">Core Planning</a></h3> <p>LNew content goes here. ollicitudi bibendum auctor.</p> <a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a> </div> </div> <div class="card-column"> <div class="card-details"> <div class="card-icons"> <img class="light-icon" src="https://imgpanda.com/upload/ib/Q4tSh2ctkH.png" alt="icon" /> </div> <h3><a href="https://www.fiverr.com/aliali44">Traditional Designs</a></h3> <p>New content goes here.New content goes here. Aenean sollicitudi bibendum auctor.</p> <a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a> </div> </div> <div class="card-column"> <div class="card-details"> <div class="card-icons"> <img class="light-icon" src="https://imgpanda.com/upload/ib/YQdOwN6IDJ.png" alt="icon" /> </div> <h3><a href="https://www.fiverr.com/aliali44">Quality Materials</a></h3> <p>New content goes here.New content goes here.liquet. Aenean sollicitudi bibendum auctor.</p> <a class="read-more-btn" href="https://www.fiverr.com/aliali44"><i class="fa-solid fa-angles-right"></i></a> </div> </div> </div> </div> </section>
CSS代码：
body { font-size: 17px; line-height: 30px; font-weight: 400; -moz-osx-font-smoothing: grayscale; word-break: break-word; -webkit-font-smoothing: antialiased; font-family: "Epilogue", sans-serif; margin: 0; background: #fff; } * { box-sizing: border-box; } .creative-cards { padding: 120px 0; position: relative; } .creative-cards .container { max-width: 1320px; width: 100%; padding-right: .75rem; padding-left: .75rem; margin-right: auto; margin-left: auto; } .creative-cards .container .row { display: flex; flex-wrap: wrap; } .creative-cards .container .row .card-column { flex: 0 0 auto; width: 33.33333333%; text-align: center; max-width: 100%; padding-right: 15px; padding-left: 15px; } .card-details { width: 80%; margin: auto; position: relative; transition: .3s ease-in-out; } .card-details:before { content: ""; width: 190px; height: 380px; background: #f7f6f2; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skew(-20deg, 0deg); z-index: -1; transition: .3s ease-in-out; } .card-details:hover:before { background-color: #fffab3; } .card-icons { width: 140px; height: 150px; position: relative; margin: auto; display: flex; align-items: center; justify-content: center; } .card-icons:before { content: ""; position: absolute; top: 0; left: 0; border: 1px solid; width: 100%; height: 100%; transform: skew(-20deg, 0deg); background: #fff; border-color: #ffee02; transition: .3s ease-in-out; } .card-details:hover .card-icons:before { background-color: #ffee02; } .card-icons img { position: relative; width: 70px; height: 70px; } .card-details h3 { margin-bottom: 15px; margin-top: 50px; font-weight: 700; font-size: 1.75rem; line-height: 1.2; } .card-details h3 a { color: #000; text-decoration: none; } .card-details p { font-size: 16px; line-height: 30px; color: #444; font-weight: 400; margin-bottom: 30px; } .read-more-btn { width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border: 1px solid; border-radius: 100%; margin: auto; background: #fff; transform: translateX(-10px); opacity: 0; visibility: hidden; border-color: #ffee02; transition: .3s ease-in-out; text-decoration: none; } .read-more-btn i { color: #000; font-size: 12px; } .card-details:hover .read-more-btn { transform: translateX(0); opacity: 1; visibility: visible; } /* ============= Responsive Ipad ==================== */ @media (max-width: 992px) { .creative-cards .container .row .card-column { flex: 0 0 auto; width: 50%; margin-bottom: 40px; } } /* ============= Responsive Iphone ==================== */ @media (max-width: 480px) { .creative-cards .container .row .card-column { flex: 0 0 auto; width: 100%; margin-bottom: 20px; } .card-details { width: 100%; } .read-more-btn { transform: translateX(0px); opacity: 1; visibility: visible; } }
