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来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
随机推荐
- Row_number 详解
SQL Server数据库ROW_NUMBER()函数的使用是本文我们要介绍的内容,接下来我们就通过几个实例来一一介绍ROW_NUMBER()函数的使用. 实例如下: 1.使用row_number() ...
- [Android] 配置build.gradle 动态传参
(1)一个Android工程中有一个build.gradle是负责Project范围的,而Module中又有各自的build.gradle是专门负责模块的. (2)在Gradle中Task是一等公民, ...
- VS中的类模板
在目录C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\ItemTemplates\CSharp\Co ...
- modbus tcp 入门详解
Modbus tcp 格式说明 通讯机制 附C#测试工具用于学习,测试 前言: 之前的博客介绍了如何用C#来读写modbus tcp服务器的数据,文章:http://www.cnblogs.com ...
- STL基础--仿函数(函数对象)
1 首先看个仿函数的例子 class X { public: void operator()(string str) { // 函数调用运算符,返回类型在operator之前 cout << ...
- [转]VB 读写ini 配置文件
转自 百度知道 C# 读写 ini配置文件 点此链接 'API 声明Public Declare Function GetPrivateProfileString Lib "kernel32 ...
- mysql查询中取差集的问题
有个场景 现在有个打卡的记录表(daka),记录了用户每天的打卡信息,同时还有个运动打卡表(sport_daka),如果用户有运动打卡则在运动打卡表里面记录. 现在要统计用户的每天的打开信息,包括运动 ...
- CyclicBarrier循环屏障相关
简介 CyclicBarrier 的字面意思是可循环使用(Cyclic)的屏障(Barrier).它要做的事情是,让一组线程到达一个屏障(也可以叫同步点)时被阻塞,直到最后一个线程到达屏障时,屏障才会 ...
- SQL按分隔符拆分字段串
CREATE VIEW [dbo].[Split_BusinessUnit] AS WITH tt AS ( SELECT BusinessUnit.BusinessUnitId , Business ...
- Windows Server 2012 R2 无法启用Microsoft .NET Framework 3.5 功能
1 在新windows 2012 R2 上安装SQL 2014 ,提示需要安装 .NET Framework 3.5 2 在添加角色和功能--功能--.NET Framework 3.5,然后失败 3 ...