废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/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); } } </style> </head> <body> <div class="heart-loading"> <ul> <li class="line-1" style="--index: 1"></li> <li class="line-2" style="--index: 2"></li> <li class="line-3" style="--index: 3"></li> <li class="line-4" style="--index: 4"></li> <li class="line-5" style="--index: 5"></li> <li class="line-6" style="--index: 6"></li> <li class="line-7" style="--index: 7"></li> <li class="line-8" style="--index: 8"></li> <li class="line-9" style="--index: 9"></li> </ul> </div> </body> </html>
到此这篇关于CSS心形加载的动画源码的实现的文章就介绍到这了,更多相关CSS 心形加载动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
1. 将成功生成的图标文件下载并改名为favico.ico,上传到网站根目录。 2. 在网站...
前言 最近在使用阿里云K8s ACK创建集群,并发布前后台应用,在使用过程中创建无...
复制代码 代码如下: style type="text/css" div.ui_infor p {font-size: 16px;} ...
在Dreamweaver中,给表格增加css定位,表格就变得象层一样可拖动。 1.在文档中插...
Dreamweaver中的代码想要插入注释,该怎么添加呢?下面我们就来看看详细的教程。...
自 2021 年 1 月 29 日正式启动以来,开源软件供应链点亮计划-暑期 2021 收到众...
1.如何清除图片下方出现几像素的空白间隙? 复制代码 代码如下: 方法1: img{dis...
linkid="system_style"type="text/css"href="global.css"rel="stylesheet"/ divi...
"Code tailor",为前端开发者提供技术相关资讯以及系列基础文章,微信关注“小和...
NO.1 前言 Tooltips常被称为 提示框(或信息提示框) ,提示框能够以较强的交互...