首页 › 代码特效 › 模仿推特卡片效果(附源码)

七夏 发表于 2025-1-2 17:35:34

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

<h2>预览效果</h2>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/nahUvZPrjofIO6jId6VzrVKen0JqyKCbfgNhib2olWa0zzJtWTSz3AMXFnia8oPtSjHDPzj0Q8Myo9iaZ0L5eWPAA/640?wx_fmt=png&amp;from=appmsg&amp;tp=webp&amp;wxfrom=5&amp;wx_lazy=1&amp;wx_co=1" alt="图片" /></p>
<h2>源码html</h2>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;section&gt;
      &lt;div class=&quot;card green&quot;&gt;
            &lt;div class=&quot;card-header&quot;&gt;
                &lt;div class=&quot;date&quot;&gt;
                  Feb 2, 2021
                &lt;/div&gt;
                &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
                  &lt;path fill-rule=&quot;evenodd&quot;
                        d=&quot;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&quot;
                        clip-rule=&quot;evenodd&quot; /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-body&quot;&gt;
                &lt;h3&gt;web designing&lt;/h3&gt;
                &lt;p&gt;Prototyping&lt;/p&gt;
                &lt;div class=&quot;progress&quot;&gt;
                  &lt;span&gt;Progress&lt;/span&gt;
                  &lt;div class=&quot;progress-bar&quot;&gt;&lt;/div&gt;
                  &lt;span&gt;90%&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-footer&quot;&gt;
                &lt;ul&gt;
                  &lt;li&gt; &lt;img
                            src=&quot;https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1&quot;
                            alt=&quot;&quot;&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;img
                            src=&quot;https://images.pexels.com/photos/1043474/pexels-photo-1043474.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1&quot;
                            alt=&quot;&quot;&gt;&lt;/li&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn-add&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;
                            fill=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
                            &lt;path fill-rule=&quot;evenodd&quot;
                              d=&quot;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&quot;
                              clip-rule=&quot;evenodd&quot; /&gt;
                        &lt;/svg&gt;
                  &lt;/a&gt;
                &lt;/ul&gt;

                &lt;a href=&quot;#&quot; class=&quot;btn-countdown&quot;&gt;2 days left&lt;/a&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card orange&quot;&gt;
            &lt;div class=&quot;card-header&quot;&gt;
                &lt;div class=&quot;date&quot;&gt;
                  Feb 05, 2021
                &lt;/div&gt;
                &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
                  &lt;path fill-rule=&quot;evenodd&quot;
                        d=&quot;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&quot;
                        clip-rule=&quot;evenodd&quot; /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-body&quot;&gt;
                &lt;h3&gt;mobile app&lt;/h3&gt;
                &lt;p&gt;Shopping&lt;/p&gt;
                &lt;div class=&quot;progress&quot;&gt;
                  &lt;span&gt;Progress&lt;/span&gt;
                  &lt;div class=&quot;progress-bar&quot;&gt;&lt;/div&gt;
                  &lt;span&gt;30%&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-footer&quot;&gt;
                &lt;ul&gt;
                  &lt;li&gt; &lt;img
                            src=&quot;https://images.pexels.com/photos/614810/pexels-photo-614810.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1&quot;
                            alt=&quot;&quot;&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;img
                            src=&quot;https://images.pexels.com/photos/874158/pexels-photo-874158.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1&quot;
                            alt=&quot;&quot;&gt;&lt;/li&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn-add&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;
                            fill=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
                            &lt;path fill-rule=&quot;evenodd&quot;
                              d=&quot;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&quot;
                              clip-rule=&quot;evenodd&quot; /&gt;
                        &lt;/svg&gt;
                  &lt;/a&gt;
                &lt;/ul&gt;

                &lt;a href=&quot;#&quot; class=&quot;btn-countdown&quot;&gt;3 weeks left&lt;/a&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card red&quot;&gt;
            &lt;div class=&quot;card-header&quot;&gt;
                &lt;div class=&quot;date&quot;&gt;
                  March 03, 2021
                &lt;/div&gt;
                &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
                  &lt;path fill-rule=&quot;evenodd&quot;
                        d=&quot;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&quot;
                        clip-rule=&quot;evenodd&quot; /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-body&quot;&gt;
                &lt;h3&gt;dashboard&lt;/h3&gt;
                &lt;p&gt;Medical&lt;/p&gt;
                &lt;div class=&quot;progress&quot;&gt;
                  &lt;span&gt;Progress&lt;/span&gt;
                  &lt;div class=&quot;progress-bar&quot;&gt;&lt;/div&gt;
                  &lt;span&gt;50%&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-footer&quot;&gt;
                &lt;ul&gt;
                  &lt;li&gt; &lt;img
                            src=&quot;https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1&quot;
                            alt=&quot;&quot;&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;img
                            src=&quot;https://images.pexels.com/photos/733872/pexels-photo-733872.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1&quot;
                            alt=&quot;&quot;&gt;&lt;/li&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn-add&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;
                            fill=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
                            &lt;path fill-rule=&quot;evenodd&quot;
                              d=&quot;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&quot;
                              clip-rule=&quot;evenodd&quot; /&gt;
                        &lt;/svg&gt;
                  &lt;/a&gt;
                &lt;/ul&gt;

                &lt;a href=&quot;#&quot; class=&quot;btn-countdown&quot;&gt;3 weeks left&lt;/a&gt;
            &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class=&quot;card blue&quot;&gt;
            &lt;div class=&quot;card-header&quot;&gt;
                &lt;div class=&quot;date&quot;&gt;
                  March 08, 2021
                &lt;/div&gt;
                &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
                  &lt;path fill-rule=&quot;evenodd&quot;
                        d=&quot;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&quot;
                        clip-rule=&quot;evenodd&quot; /&gt;
                &lt;/svg&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-body&quot;&gt;
                &lt;h3&gt;web designing&lt;/h3&gt;
                &lt;p&gt;Wireframing&lt;/p&gt;
                &lt;div class=&quot;progress&quot;&gt;
                  &lt;span&gt;Progress&lt;/span&gt;
                  &lt;div class=&quot;progress-bar&quot;&gt;&lt;/div&gt;
                  &lt;span&gt;20%&lt;/span&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;card-footer&quot;&gt;
                &lt;ul&gt;
                  &lt;li&gt; &lt;img
                            src=&quot;https://images.pexels.com/photos/2379005/pexels-photo-2379005.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1&quot;
                            alt=&quot;Erik Longman&quot;&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;img
                            src=&quot;https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&amp;cs=tinysrgb&amp;w=1260&amp;h=750&amp;dpr=1&quot;
                            alt=&quot;Jane Doe&quot;&gt;&lt;/li&gt;
                  &lt;a href=&quot;#&quot; class=&quot;btn-add&quot;&gt;&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 24 24&quot;
                            fill=&quot;currentColor&quot; class=&quot;size-6&quot;&gt;
                            &lt;path fill-rule=&quot;evenodd&quot;
                              d=&quot;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&quot;
                              clip-rule=&quot;evenodd&quot; /&gt;
                        &lt;/svg&gt;
                  &lt;/a&gt;
                &lt;/ul&gt;

                &lt;a href=&quot;#&quot; class=&quot;btn-countdown&quot;&gt;3 weeks left&lt;/a&gt;
            &lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
&lt;/body&gt;

&lt;/html&gt;
</code></pre>

梦淡如非 发表于 2025-1-2 17:39:51

啥玩意儿？

查看完整版本: 模仿推特卡片效果(附源码)