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

原文地址：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:;

    padding:;

    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 为母亲节创作一颗像素画风格的爱心的更多相关文章

前端每日实战：20# 视频演示如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教程此视频 ...
如何用纯 CSS 为母亲节创作一颗像素画风格的爱心
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LmrZVX 可交互视频教 ...
如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频 ...
前端每日实战：96# 视频演示如何用纯 CSS 和 D3 创作一艘遨游太空的宇宙飞船
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/oMqNmv 可交互视频此视频是可 ...
如何用纯 CSS 和 D3 创作一只扭动的蠕虫
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QBQJMg 可交互视频 ...
3.纯 CSS 创作一个容器厚条纹边框特效
原文地址:3.纯 CSS 创作一个容器厚条纹边框特效没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...
2.纯 CSS 创作一个矩形旋转 loader 特效
原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效扩展后地址:https://scrimba.com/c/cNJVWUR 扩展地址:https://codepen.io/pen/ HT ...
1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
一个标签的72变，打造一个纯CSS图标库
每次要用到图标的时候都会到 icono 去copypaste,但每次用到的时候尺寸都各不一样,总是要调整参数,巨烦.当然你可以会想到用zoom.scale来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...

随机推荐

sql server 安装时提示要重启
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\Session Manager 打开“Session Manager”文件夹之后在右侧的区域中单 ...
python打包为独立可执行程序
linux下 pip install pyinstaller 针对需要的项目 pyinstaller -F -w ./xxx.py 即可
Windows右键菜单中新建项目添加与删除
一种是如 txt 类型: HKEY_CLASSES_ROOT\.txt\ShellNew 项下空字符串值:NullFile 另一种如MsOffice类型: HKEY_CLASSES_ROOT\.xl ...
【AMQ】之安装，启动，访问
1.访问官网下载AMQ 2.解压下载包 windows直接找到系统对应的win32|win64 双击activemq.bat 即可 linux执行 ./activemq start 访问: AMQ默认 ...
C++进阶--派生类的析构(虚析构函数，shared_ptr)
//############################################################################ /* 在多态虚基类中声明一个虚析构函数 * ...
noi2017 day2t2
设a[i]为当前方案中第 1..i 天变质的蔬菜有几个,b[i]为前i天至少能卖出几个,方案可行的条件是对任意i有a[i]<=b[i],用线段树维护b[i]-a[i]. 从小到大枚举天数,枚举到 ...
vue之自定义组件
除了核心功能默认内置的指令外,vue也允许用户注册自定义指令.虽然在vue2.0中,代码复用和抽象的主要形式是组件,但是有些情况下,我们仍需要对普通DOM元素进行底层操作,这个时候就需要用到自定义指令 ...
web前端开发浅析
原文地址:http://www.cnblogs.com/babyzone2004/articles/1807381.html 摘要:前端开发作为一项新的领域,经历的时间随然较短,却显示了强大的生命里 ...
[UE4]移动惯性
2个因素影响滑行: 1.摩擦力:Ground Frition 2.减速度:Braking decelearation Walking
svn 的add 和 commit
add 功能:向文件拷贝所在的文件夹中添加新的文件,并作出标识,是新添加的,下一步提交时将一并提交到Subversion版本库中去.简单的说就是将一新文件加入svn,你添加再提交后该文件就进入subv ...

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

20.纯 CSS 为母亲节创作一颗像素画风格的爱心的更多相关文章

随机推荐

热门专题