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来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
随机推荐
- .net(C#)常见面试题
1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以访问. protected : 保护成 ...
- QQ检测登陆及QQ协议
QQ协议分析及还原 http://blog.csdn.net/qinggebuyao/article/details/7814499 腾讯的网站如何检测到你的 QQ 已经登录? http://blog ...
- 关于Java按键事件KeyEvent重点几步
按键事件可以利用键盘来控制和执行一些动作,或者从键盘上获取输入,只要按下,释放一个键或者在一个组件上敲击,就会触发按键事件.KeyEvent对象描述事件的特性(按下,放开,或者敲击一个键)和对应的值. ...
- 开启Unity3D之旅
圣典知识目录http://game.ceeger.com/Manual/ NGUI http://www.taikr.com/course/34泰课课程 http://tieba.baidu.com/ ...
- Ubuntu 14.10 下HBase错误集
1 如果机群时间不同步,那么启动子节点RegionServer就会出问题 aused by: org.apache.hadoop.hbase.ipc.RemoteWithExtrasException ...
- Hadoop概念学习系列之Hadoop、Spark学习路线（很值得推荐）（十八）
不多说,直接上干货! 说在前面的话 此笔,对于仅对于Hadoop和Spark初中学者.高手请忽略! 1 Java基础: 视频方面: 推荐<毕向东JAVA基础视频教程>.学 ...
- 客户端负载均衡Ribbon之一：Spring Cloud Netflix负载均衡组件Ribbon介绍
Netflix:['netfliːks] ribbon:英[ˈrɪbən]美[ˈrɪbən]n. 带; 绶带; (打印机的) 色带; 带状物;v. 把…撕成条带; 用缎带装饰; 形成带状; L ...
- NIO框架之MINA源码解析（四）：粘包与断包处理及编码与解码
1.粘包与段包 粘包:指TCP协议中,发送方发送的若干包数据到接收方接收时粘成一包,从接收缓冲区看,后一包数据的头紧接着前一包数据的尾.造成的可能原因: 发送端需要等缓冲区满才发送出去,造成粘包 接收 ...
- [转][EasyUI]扩展 DateBox
/** * 给时间框控件扩展一个清除的按钮 */ $.fn.datebox.defaults.cleanText = '清空'; (function ($) { var buttons = $.ext ...
- MySQL 之 MySQL数据库的优化
服务器物理硬件的优化 在挑选硬件服务器时,我们应该从下面几个方面着重对MySQL服务器的硬件配置进行优化,也就是说将项目中的资金着重投入到如下几处: 1.磁盘寻道能力(磁盘I/O),我们现在用的都是S ...