原文地址: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. Combobox中禁止鼠标中键滚动list列表

    //第1种方法 procedure TForm1.FormMouseWheel(Sender: TObject; Shift: TShiftState; WheelDelta: Integer; Mo ...

  2. 学习 MySQL中导入 导出CSV

    学习 MySQL中导入 导出CSV http://blog.csdn.net/sara_yhl/article/details/6850107    速度是很快的 导出 select * from t ...

  3. 【JVM参数】Java启动时,显示class是从哪个Jar中加载的

    显示具体的Class是从哪个Jar文件加载 JVM参数: -verbose:class 启动后输出如下: [Opened D:\Program Files\Java\jdk1.8.0_131\jre\ ...

  4. 【分布式session】Spring-session的使用

    概述 Session用于保存用户信息,通常一个Session保存一个用户信息,在以Tomcat为Servlet Container的web应用中,用户信息都保存在HttpSession中: 当用户发起 ...

  5. 有趣的background

    前言 background是css的简写形式,可以一次性定义各种背景属性,包括color.image.origin.size,repeat方式等等. background在活动项目中用的还是比较多的, ...

  6. P1507 NASA的食物计划

    传送 01背包又进化了,它变成了二维背包. 既然它多了一个维度,那么我们的f[j]也变成了二维数组f[i][j],其中i表示费用1,j表示费用2 核心方程也相应的变成了f[i][j]=max(f[i- ...

  7. P1226快速幂取余

    链接:https://www.luogu.org/problemnew/show/P1226 题解:(重要结论:(a*b*c*d*...*n)%k=[(a%k)*(b%k)*...(n%k)]%k) ...

  8. Zookeeper的集群安装

    Zookeeper的集群安装 关闭防火墙 安装jdk 下载Zookeeper的安装包 解压Zookeeper的安装包 进入Zookeeper的安装目录中conf目录 将zoo_sample.cfg复制 ...

  9. Jmeter(四)NO-GUI模式运行

    在前几篇中有提到NO-GUI模式的运行,是的,Jmeter支持NO-GUI方式的运行. 如果Jmeter的环境搭建完毕,那么在命令行下执行jmeter - ?便会出现jmeter的各个参数 --? p ...

  10. [UE4]Size To content自动适配大小