码迷,mamicode.com
首页 > Web开发 > 详细

20.纯 CSS 为母亲节创作一颗像素画风格的爱心

时间:2019-01-12 21:50:51      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:padding   pac   mes   key   com   sheet   lex   --   white   

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

感想: 网格grid 又来了;

fr : (剩余空间长度)单位,

  1.当(50px,nfr),nfr代表除50px剩余的长度,

  2.当(nfr,mfr), 长度之比 n:m ; n+m=总长度。

HTML代码:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <!-- 描绘出 8 行 9 列的心形像素图案,其中<dot>是指要填充颜色的像素点 -->
        <div class="heart">
            <!-- line 1 -->
            <span></span>
            <dot></dot>
            <dot></dot>
            <span></span>
            <span></span>
            <span></span>
            <dot></dot>
            <dot></dot>
            <span></span>
            <!-- line 2 -->
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <span></span>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <!-- line 3 -->
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <!-- line 4 -->
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <!-- line 5 -->
            <span></span>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <span></span>
            <!-- line 6 -->
            <span></span>
            <span></span>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <span></span>
            <span></span>
            <!-- line 7 -->
            <span></span>
            <span></span>
            <span></span>
            <dot></dot>
            <dot></dot>
            <dot></dot>
            <span></span>
            <span></span>
            <span></span>
            <!-- line 8 -->
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <dot></dot>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>    
    </body>
</html>

CSS代码:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.heart{
    /* grid : 网格 */
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    /* 网格间距 */
    grid-gap: 2px;
}
.heart > *{
    width: 1em;
    height: 1em;
    background-color: white;
}
.heart dot{
    background-color: red;
    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);
    }
    50%{
        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;
}

 

20.纯 CSS 为母亲节创作一颗像素画风格的爱心

标签:padding   pac   mes   key   com   sheet   lex   --   white   

原文地址:https://www.cnblogs.com/FlyingLiao/p/10260957.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!