卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)

简介: 卡片翻转,故事展开:HTML+CSS动画让信息传递更生动!(含源码)

🌟如何让内容呈现更加吸引人成为设计师和开发者的挑战。大气实用的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;
            }
        }
相关文章
|
5天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
1天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
19 1
|
6天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
15 3
|
3月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
17天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
66 6
|
1月前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
2月前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。

热门文章

最新文章