39.纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
原文地址: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 创作一个表达怀念童年心情的条纹彩虹心特效的更多相关文章
- 前端每日实战:39# 视频演示如何用纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教程 此视频 ...
- 纯 CSS 创作一个表达怀念童年心情的条纹彩虹心特效
效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/QxbmxJ 可交互视频教 ...
- 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& ...
- 69.纯 CSS 创作一个单元素抛盒子的 loader
原文地址:https://segmentfault.com/a/1190000015470411#articleHeader0 HTML code: <div class="loade ...
- 52.纯 CSS 创作一个小球绕着圆环盘旋的动画
原文地址:https://segmentfault.com/a/1190000015295466 感想:重点在小球绕环转动. HTML code: <div class="contai ...
- 47.纯 CSS 创作一个蝴蝶标本展示框
html,body{ margin:; padding:; } body{ height: 100vh; display: flex; justify-content: center; align-i ...
- 23.1纯 CSS 创作一个菜单反色填充特效
交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...
随机推荐
- Combobox中禁止鼠标中键滚动list列表
//第1种方法 procedure TForm1.FormMouseWheel(Sender: TObject; Shift: TShiftState; WheelDelta: Integer; Mo ...
- 学习 MySQL中导入 导出CSV
学习 MySQL中导入 导出CSV http://blog.csdn.net/sara_yhl/article/details/6850107 速度是很快的 导出 select * from t ...
- 【JVM参数】Java启动时,显示class是从哪个Jar中加载的
显示具体的Class是从哪个Jar文件加载 JVM参数: -verbose:class 启动后输出如下: [Opened D:\Program Files\Java\jdk1.8.0_131\jre\ ...
- 【分布式session】Spring-session的使用
概述 Session用于保存用户信息,通常一个Session保存一个用户信息,在以Tomcat为Servlet Container的web应用中,用户信息都保存在HttpSession中: 当用户发起 ...
- 有趣的background
前言 background是css的简写形式,可以一次性定义各种背景属性,包括color.image.origin.size,repeat方式等等. background在活动项目中用的还是比较多的, ...
- P1507 NASA的食物计划
传送 01背包又进化了,它变成了二维背包. 既然它多了一个维度,那么我们的f[j]也变成了二维数组f[i][j],其中i表示费用1,j表示费用2 核心方程也相应的变成了f[i][j]=max(f[i- ...
- P1226快速幂取余
链接:https://www.luogu.org/problemnew/show/P1226 题解:(重要结论:(a*b*c*d*...*n)%k=[(a%k)*(b%k)*...(n%k)]%k) ...
- Zookeeper的集群安装
Zookeeper的集群安装 关闭防火墙 安装jdk 下载Zookeeper的安装包 解压Zookeeper的安装包 进入Zookeeper的安装目录中conf目录 将zoo_sample.cfg复制 ...
- Jmeter(四)NO-GUI模式运行
在前几篇中有提到NO-GUI模式的运行,是的,Jmeter支持NO-GUI方式的运行. 如果Jmeter的环境搭建完毕,那么在命令行下执行jmeter - ?便会出现jmeter的各个参数 --? p ...
- [UE4]Size To content自动适配大小