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

HTML code:

<div class="heart">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS code:

body {
margin:;
padding:;
/* vh就是当前屏幕可见高度的1%,也就是说
height:100vh == height:100%;
但是有个好处是当元素没有内容时候,设置height:100%该元素不会被撑开,
但是设置height:100vh,该元素会被撑开屏幕高度一致。
*/
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at center, navy, black);
}
.heart{
font-size: 20px;
width: 16em;
height: 11em;
display: flex;
justify-content: space-between;
}
.heart span {
--c: lightblue;
--h: 50%;
--t: 25%;
width: 1em;
height: var(--h);
position: relative;
top: var(--t);
border-radius: 0.5em;
background-color: var(--c);
animation: beating 5s infinite;
}
@keyframes beating{
0%, 30% {
top: var(--t);
height: var(--h);
background-color: var(--c);
filter: blur(0);
width: 1em;
}
60%, 70% {
height: 50%;
top: 25%;
background-color: lightblue;
filter: blur(5px);
width: 0.1em;
}
}
/* 配色 */
.heart span:nth-child(1),
.heart span:nth-child(9) {
--c: orangered;
/* 设置高度 */
--h: 3em;
--t: 2.2em;
}
.heart span:nth-child(2),
.heart span:nth-child(8) {
--c: gold;
--h: 6em;
--t: 0.6em;
}
.heart span:nth-child(3),
.heart span:nth-child(7) {
--c: limegreen;
--h: 8em;
--t:;
}
.heart span:nth-child(4),
.heart span:nth-child(6) {
--c: dodgerblue;
--h: 9em;
--t: 0.8em;
}
.heart span:nth-child(5) {
--c: mediumpurple;
--h: 9.4em;
--t: 1.6em;
}

39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效的更多相关文章

  1. 前端每日实战:39# 视频演示如何用纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教程 此视频 ...

  2. 纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教 ...

  3. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

  4. 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址:2.纯 CSS 创作一个矩形旋转 loader 特效 扩展后地址:https://scrimba.com/c/cNJVWUR  扩展地址:https://codepen.io/pen/ HT ...

  5. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  6. 69.纯 CSS 创作一个单元素抛盒子的 loader

    原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...

  7. 52.纯 CSS 创作一个小球绕着圆环盘旋的动画

    原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...

  8. 47.纯 CSS 创作一个蝴蝶标本展示框

    html,body{ margin:; padding:; } body{ height: 100vh; display: flex; justify-content: center; align-i ...

  9. 23.1纯 CSS 创作一个菜单反色填充特效

    交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...

随机推荐

  1. position实现分层和遮罩层功能

    很多网站,当点了一个按钮后,弹出一个窗口,底层变透明不可选,就是用到层的概念,至少三层 第一层,底层原始层 第二层,遮罩层,用到positon: fixed; top bottom left righ ...

  2. Python3中Urllib库基本使用

    什么是Urllib? Python内置的HTTP请求库 urllib.request          请求模块 urllib.error              异常处理模块 urllib.par ...

  3. LinkedList的自定义实现

    一.背景 LinkedList双向链表: 代码: Node.java: package com.cy.collection; public class Node { Node previous; // ...

  4. tcpdump命令(转载)

    https://www.cnblogs.com/ggjucheng/archive/2012/01/14/2322659.html 简介 用简单的话来定义tcpdump,就是:dump the tra ...

  5. Service Worker初体验

    http://web.jobbole.com/84792/ http://imweb.io/topic/56592b8a823633e31839fc01

  6. KPPW2.2 漏洞利用--文件下载

    KPPW2.2 漏洞利用--文件下载 任意文件下载漏洞 环境搭建 1,集成环境简单方便,如wamp,phpstudy.... 2,KPPW v2.2源码一份(文末有分享)放到WWW目录下面 3,安装, ...

  7. MFC+mongodb+nodejs 数据库的读取与写入操作

    首先通过nodejs和mongodb建立后端服务器 一.在windows平台下启动mongodb服务器 1.进入mongodb的安装目录,并进去bin目录启动mongod 2.在d盘建立mongodb ...

  8. 02-Sockent客户端

    package com.day1; import java.io.IOException; import java.io.OutputStream; import java.net.Inet4Addr ...

  9. boost 学习笔记 1: lexical_cast

    参考原著地址:http://einverne.github.io/post/2015/12/boost-learning-note-1.html 转换对象要求 lexical_cast 对转换对象有如 ...

  10. solr学习(六):使用自定义int/long类型主键

    需求分析: 我不想使用solr默认的主键id,我想换成其他的,比如我的文章id为article_id,我想让article_id作为主键. 而且,我的主键是int类型,而solr的主键默认是strin ...