如何用纯 CSS 为母亲节创作一颗像素画风格的爱心

秒速五厘米 2023-06-04 04:55 1阅读 0赞

![img2018-cnblogs-com_blog_1504257_201811_1504257-20181120143130497-752534402.png][]

## 效果预览 ##

[在线演示][Link 1]

按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。

[https://codepen.io/comehope/pen/LmrZVX][https_codepen.io_comehope_pen_LmrZVX]

## 可交互视频教程 ##

此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。

请用 chrome, safari, edge 打开观看。

[https://scrimba.com/p/pEgDAM/cPd9asV][https_scrimba.com_p_pEgDAM_cPd9asV]

## 源代码下载 ##

[本地下载][Link 2]

请从 github 下载。

[https://github.com/comehope/f...][https_github.com_comehope_f...]

## 代码解读 ##

定义 dom，描绘出 8 行 9 列的心形像素图案，其中 <dot> 是指要填充颜色的像素点：

居中显示：

html,body{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(silver, white);
    }

设置心形的样式：

.heart {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
        grid-gap: 2px;
    }
    
    .heart > * {
        width: 1em;
        height: 1em;
        border-radius: 0.1em;
        font-size: 30px;
    }
    
    .heart dot{
        background: red;
    }

定义淡入淡出动画：

.heart dot{
        filter: opacity(0);
        animation: animation 5s ease-out infinite;
    }
    
    @keyframes animation{
        0%{
            filter: opacity(0);
            transform: translateY(-10em);
        }
    
        25%{
            filter: opacity(1);
            transform: translateY(0);
        }
    
        75%{
            filter: opacity(1);
            transform: translateY(0);
        }
    
        100%{
            filter: opacity(0);
            transform: translateY(10em);
        }
    }

最后，让各像素点按不同时间入场，增强动画效果：

.heart dot:nth-of-type(2n) {
        animation-delay: 0.2s;
    }
    
    .heart dot:nth-of-type(3n) {
        animation-delay: 0.3s;
    }
    
    .heart dot:nth-of-type(4n) {
        animation-delay: 0.4s;
    }
    
    .heart dot:nth-of-type(5n) {
        animation-delay: 0.5s;
    }
    
    .heart dot:nth-of-type(6n) {
        animation-delay: 0.6s;
    }
    
    .heart dot:nth-of-type(7n) {
        animation-delay: 0.7s;
    }
    
    .heart dot:nth-of-type(8n) {
        animation-delay: 0.8s;
    }
    
    .heart dot:nth-of-type(9n) {
        animation-delay: 0.9s;
    }
    
    .heart dot:nth-of-type(10n) {
        animation-delay: 1.0s;
    }
    
    .heart dot:nth-of-type(11n) {
        animation-delay: 1.1s;
    }

大功告成！

## 知识点 ##

*  grid-template-columns [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns][https_developer.mozilla.org_en-US_docs_Web_CSS_grid-template-columns]
 *  grid-gap [https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap][https_developer.mozilla.org_en-US_docs_Web_CSS_grid-gap]
 *  :nth-of-type() [https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type][https_developer.mozilla.org_en-US_docs_Web_CSS_nth-of-type]
 *  animation-delay [https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay][https_developer.mozilla.org_en-US_docs_Web_CSS_animation-delay]
 *  translateY() [https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY][https_developer.mozilla.org_en-US_docs_Web_CSS_transform-function_translateY]
 *  filter [https://developer.mozilla.org/en-US/docs/Web/CSS/filter][https_developer.mozilla.org_en-US_docs_Web_CSS_filter]

原文地址：https://segmentfault.com/a/1190000014837536

更多专业前端知识，请上 **【猿2048】www.mk2048.com**

[img2018-cnblogs-com_blog_1504257_201811_1504257-20181120143130497-752534402.png]: https://mk2048.oss-cn-beijing.aliyuncs.com/web_upload/blog_imgs/50/img2018-cnblogs-com_blog_1504257_201811_1504257-20181120143130497-752534402.png
[Link 1]: https://www.jqhtml.com/yanshi?demourl=/wp-content/uploads/2018/11/front-end-daily-challenges-master/020-pixel-animation-heart-shape&demotitle=纯%20CSS%20为母亲节创作一颗像素画风格的爱心
[https_codepen.io_comehope_pen_LmrZVX]: https://codepen.io/comehope/pen/LmrZVX
[https_scrimba.com_p_pEgDAM_cPd9asV]: https://scrimba.com/p/pEgDAM/cPd9asV
[Link 2]: http://www.jqhtml.com/19246.html
[https_github.com_comehope_f...]: https://github.com/comehope/front-end-daily-challenges/tree/master/020-pixel-animation-heart-shape
[https_developer.mozilla.org_en-US_docs_Web_CSS_grid-template-columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
[https_developer.mozilla.org_en-US_docs_Web_CSS_grid-gap]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-gap
[https_developer.mozilla.org_en-US_docs_Web_CSS_nth-of-type]: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type
[https_developer.mozilla.org_en-US_docs_Web_CSS_animation-delay]: https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay
[https_developer.mozilla.org_en-US_docs_Web_CSS_transform-function_translateY]: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translateY
[https_developer.mozilla.org_en-US_docs_Web_CSS_filter]: https://developer.mozilla.org/en-US/docs/Web/CSS/filter