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来做缩放,但是这样的缩放会使得线宽也变粗了,不 ...
随机推荐
- CentOs6.7 python2.6升级到2.7.11
1.查看当前python的版本 #python -V Python 2.6.6 2.下载Python-2.7.11 wget https://www.python.org/ftp/python/2.7 ...
- 移动互联网终端的touch事件,touchstart, touchend, touchmove 很棒的文章
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
- selenium python选取下拉框中的值
https://stackoverflow.com/questions/47689936/unable-to-scroll-and-select-desired-year-from-calender- ...
- zuul网关Filter处理流程及异常处理
本文转载自:https://blog.csdn.net/tianyaleixiaowu/article/details/77893822 上一篇介绍了java网关Zuul的简单使用,进行请求路由转发和 ...
- Hadoop错误集：Could not find the main class: org.apache.hadoop.*
在搭建Hadoop机群的时候,之前遇见了很多次找不到类的错误,因为对Hadoop了解不深,所以就在网上漫无目的的找解决方案,所以这里总结下我用的方法. 解决办法一: 我之前遇到了找不到 org.apa ...
- sass之为什么要使用预处理器
使用预处理器主要目的就是编写出可读性更好.更易于维护的css. 以sass为例,sass中提供了@import可以在sass文件中导入其他sass文件,或在选择器中按需导入所需要的某个属性样式: @i ...
- 服务容错保护断路器Hystrix之七：做到自动降级
从<高可用服务设计之二:Rate limiting 限流与降级>中的“自动降级”中,我们这边将系统遇到“危险”时采取的整套应急方案和措施统一称为降级或服务降级.想要帮助服务做到自动降级,需 ...
- bundle adjustment原理(1)
那些光束平差的工具,比如SBA.SSBA之类的虽然好,然而例子和教程都不够多且不够详细,让初学者难以上手. 要传入的参数虽然有解释,然而却也不是十分清楚其含义,具体要怎么生成,生成为什么形式. 我在折 ...
- 廖雪峰Java3异常处理-1错误处理-2捕获异常
1捕获异常 1.1 finally语句保证有无错误都会执行 try{...}catch (){...}finally{...} 使用try...catch捕获异常 可能发生异常的语句放在try{... ...
- IE浏览器强制不是要兼容视图
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta ht ...