心形源码HTML,纯CSS实现心形加载动画(附源码)
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我。
.heart-loading {
margin-top: 120px;
width: 200px;
height: 200px;
}
ul {
list-style: none;
display: flex;
justify-content: space-between;
width: 150px;
height: 10px;
/* 做心形和条形想法是一样的,但是每条高度是不一样的 */
}
li {
--count: 9;
--rgb: calc(var(--index) / var(--count) * .5turn);
/* 不能把这个延时设置的太慢.太慢就看不出来是心形了,同时调整延时和动画时长即可 */
--time: calc((var(--index) - 1) * 150ms);
border-radius: 5px;
width: 10px;
height: 10px;
background-color: #003BB3;
/* 利用fiter函数可以让颜色渐变会非常漂亮 */
filter: hue-rotate(var(--rgb));
/* 下边这个是动画时长 */
animation-duration: 2.5s;
animation-delay: var(--time);
animation-iteration-count: infinite;
}
.line-1,
.line-9 {
animation-name: line-move-1;
}
.line-2,
.line-8 {
animation-name: line-move-2;
}
.line-3,
.line-7 {
animation-name: line-move-3;
}
.line-4,
.line-6 {
animation-name: line-move-4;
}
.line-5 {
animation-name: line-move-5;
}
/* 对称的动画要相同高度,这样看出心形了 */
@keyframes line-move-1 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 30px;
transform: translate3d(0, -15px, 0);
}
}
@keyframes line-move-2 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 60px;
transform: translate3d(0, -30px, 0);
}
}
@keyframes line-move-3 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 80px;
transform: translate3d(0, -40px, 0);
}
}
@keyframes line-move-4 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 90px;
transform: translate3d(0, -30px, 0);
}
}
@keyframes line-move-5 {
0%,
10%,
90%,
100% {
height: 10px;
}
45%,
55% {
height: 90px;
transform: translate3d(0, -20px, 0);
}
}
更多编程相关知识,请访问:编程教学!!
心形源码HTML,纯CSS实现心形加载动画(附源码)相关推荐
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- css3 烟 蚊香_如何使用纯CSS实现蚊香燃烧的效果(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现传统蚊香燃烧的效果(附源码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 每日前端实战系列的全部源代码请从 ...
- HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画 效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
- CSS 3.0实现加载动画
给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
- java转俯视图,如何使用纯CSS实现一个足球场的俯视图(附源码)
本篇文章给大家带来的内容是关于如何使用纯CSS实现一个足球场的俯视图(附源码) ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 效果预览 源代码下载 https://github.c ...
- HTML卡片式布局源码,html5自适应卡片式设计动态加载整站源码_
html5自适应卡片式设计动态加载整站源码 该模板是非常容易存活的,这样的程序很容易吸引访客点击,提升ip流量和pv是非常有利的,随意挂点联盟广告都能养活程序. 本套整站源码采使用现在非常流行的全屏自 ...
- html5 css3炫酷效果,28种纯CSS3炫酷loading加载动画特效
这是一组效果非常炫酷的纯CSS3 Loading加载动画特效.这组loading动画共有27种不同的效果.每一种loading动画都是通过CSS3的keyframes帧动画来完成的,每一个加载动画都构 ...
- html彩虹效果文字,CSS 实现彩虹条加载动画特效
利用css的delay延迟以及旋转动画效果实现彩虹条加载动画,纯css没有一行js代码,喜欢的搞起来. HTML结构: CSS结构 body { background-color:#000; } .b ...
- css线条伸缩_CSS3加载动画之线条伸缩
加载动画之线条伸缩 效果图 思路 通过 3 个线条高度的动态变化实现加载动画,为了突出效果,给线条增加了阴影.对动画而言,keyframes 和 animation 是必不可少的技巧.同时本例中使用了 ...
最新文章
- vue3.0以上关于打包后出现空白页和路由不起作用
- Nodejs Web网站-请求路径分发
- 【转】复盘一次失败的技术面试后,我成功拿到了5个offer
- Vue安装jquery插件
- [2020多校A层12.1]树(倍增/单调栈/dfs栈)
- Docker for windows 容器内网通过独立IP直接访问的方法
- 大学编程python_大学生想学一门编程语言傍身,Python可以吗?
- 计算机包括桌面计算机和便携式计算机,【填空题】( )计算机包括桌面计算机和便携式计算机这两种形式。...
- Mybatis自动去重
- 【大话传送网-学习笔记】传送网与GSM网络
- 生产质量分析,助力企业掌握影响质量的全量数据
- mysql 设置忽略大小写
- 手把手教你解决PL2303驱动在Win10无法使用
- 飞速低代码 | 低代码,数字化建设的 “ 最后一公里
- 一个程序员的奋斗路程
- 新浪校招php笔试题,新浪笔试题 PHP
- 使用uniapp绘制一个折线图(uCharts)
- 为什么点火信号叫KL15,蓄电池电压叫KL30
- ASEMI代理AD9959BCPZ原装ADI车规级AD9959BCPZ
- PHP读和写Excel文件
热门文章
- python plc fx5u_三菱PLC FX5U定位编程时的注意事项说明
- php控制舵机,分享一个关于SG90舵机的实验(+串口控制)
- NLP 前置知识2 —— 深度学习算法
- 【工作笔记】微信公众号页面摇一摇+触发音效
- 狂胜——Redis学习笔记
- 韩国的开发者开源项目 paper with code论文自动下载
- Xcode真机调试中There was an internal API error错误解决方法
- 2023最新行业圈子系统小程序/语音房APP/短视频APP/商城APP/相亲APP/开黑陪玩APP
- VS C++项目打开时报 fatal error RC1015
- Centos 在 Selenium 使用中的异常:chrome not reachable