官方微信 手机客户端访问推广帮助
登录 注册

3BBS»首页 › 教程分享 › 代码特效 › 模仿推特卡片效果(附源码)

模仿推特卡片效果(附源码)

[复制链接]
七夏（UID：1） 发表于 2025-1-2 17:35:34 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×

预览效果

图片

源码html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <section>
        <div class="card green">
            <div class="card-header">
                <div class="date">
                    Feb 2, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>web designing</h3>
                <p>Prototyping</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>90%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">2 days left</a>
            </div>
        </div>
        <div class="card orange">
            <div class="card-header">
                <div class="date">
                    Feb 05, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>mobile app</h3>
                <p>Shopping</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>30%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/874158/pexels-photo-874158.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
        <div class="card red">
            <div class="card-header">
                <div class="date">
                    March 03, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>dashboard</h3>
                <p>Medical</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>50%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <li> <img
                            src="https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt=""></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
        <div class="card blue">
            <div class="card-header">
                <div class="date">
                    March 08, 2021
                </div>
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
                    <path fill-rule="evenodd"
                        d="M10.5 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0Zm0 6a1.5 1.5 0"
                        clip-rule="evenodd" />
                </svg>
            </div>
            <div class="card-body">
                <h3>web designing</h3>
                <p>Wireframing</p>
                <div class="progress">
                    <span>Progress</span>
                    <div class="progress-bar"></div>
                    <span>20%</span>
                </div>
            </div>
            <div class="card-footer">
                <ul>
                    <li> <img
                            src="https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt="Erik Longman"></li>
                    <li> <img
                            src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1"
                            alt="Jane Doe"></li>
                    <a href="#" class="btn-add"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                            fill="currentColor" class="size-6">
                            <path fill-rule="evenodd"
                                d="M12 3.75a.75.75 0 0 1 .75.75v6.75h6.75a.75.75 0 0 1 0 1.5h-6.75v6.75a.75.75 0 0 1-1.5 0v-6.75H4.5a.75.75 0 0 1 0-1.5h6.75V4.5a.75.75 0 0 1 .75-.75Z"
                                clip-rule="evenodd" />
                        </svg>
                    </a>
                </ul>

                <a href="#" class="btn-countdown">3 weeks left</a>
            </div>
        </div>
    </section>
</body>

</html>
lt, gt, div

相关帖子

小时候，看腻了农村的牛和马，长大后，来到了城里，才知道原来到处都是牛马！
回复

使用道具 举报

全部回复1 显示全部楼层
梦淡如非（UID：8） 发表于 2025-1-2 17:39:51 | 显示全部楼层
啥玩意儿？
全有导航 - 上网，从全有开始！ ^_^ 名门萌妹子 ^_^
回复

使用道具 举报

发帖

快速回帖

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1楼
2楼

关于楼主

七夏 Lv.10
管理员

  • 主题

    897

  • 回答

    340

  • 积分

    2446
虚位以待，此位置招租

商务推广

    此位置招租 黑粉猫影院-免费看电影 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租
  • 一个提供站长技术交流、疑问解答
  • 网站源码源码下载与网站建设教程
  • 交易信息发布、友链互换的综合论坛
站长交流
站长杂谈
主机交流
域名交流
悬赏问答
交易大厅
域名出售
网站交易
主机交易
友链交换
资源大厅
程序源码
模板主题
模块插件
软件工具
教程分享
美化教程
建站教程
代码特效
经验分享

官方微信

手机APP

Powered by Discuz! X3.5 Licensed Copyright © 2023-2025, Tencent Cloud.

鲁ICP备20023396号-7
手机版|小黑屋|加入Q群|随便看看|Archiver|