CSS心形加载的动画源码的实现


Posted in HTML / CSS onMarch 09, 2021

CSS心形加载的动画源码的实现

<!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>

 

HTML / CSS 相关文章推荐
使用CSS3制作倾斜导航条和毛玻璃效果
Sep 12 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
浅析几个CSS3常用功能的写法
Jun 05 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
html5使用Canvas绘图的使用方法
Nov 21 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
html+js 实现markdown编辑器效果
Oct 23 HTML / CSS
完美实现CSS垂直居中的11种方法
Mar 27 HTML / CSS
flex弹性布局详解
Mar 20 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
纯CSS3实现质感细腻丝滑按钮
Mar 09 #HTML / CSS
css动画效果之animation的常用样式
Mar 09 #HTML / CSS
使用CSS3实现字体颜色渐变的实现
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
详解CSS样式中的 !important * _ 符号
a标签的css样式四个状态
Mar 09 #HTML / CSS
CSS中一些@规则的用法小结
Mar 09 #HTML / CSS
You might like
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
Aster vs KG BO3 第一场2.19
2021/03/10 DOTA
JQuery CSS样式控制 学习笔记
2009/07/23 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
IE不支持getElementsByClassName最终完美解决方案
2012/12/17 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
2016/04/13 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
Vue2.0+ElementUI实现表格翻页的实例
2017/10/23 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python实现简单的语音识别系统
2017/12/13 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
python网络爬虫学习笔记(1)
2018/04/09 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
python re库的正则表达式入门学习教程
2019/03/08 Python
python实现计数排序与桶排序实例代码
2019/03/28 Python
Python 实用技巧之利用Shell通配符做字符串匹配
2019/08/23 Python
Python中的sys.stdout.write实现打印刷新功能
2020/02/21 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
HTML5等待加载动画效果
2017/07/27 HTML / CSS
戴尔英国官网:Dell英国
2017/05/27 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
初中音乐教学反思
2014/01/12 职场文书
女方家长婚礼答谢词
2015/09/29 职场文书
学前班教学反思
2016/02/24 职场文书
关于销售人员的年终工作总结要点
2019/08/15 职场文书
创业计划书之熟食店
2019/10/16 职场文书
话题作文之成长
2019/12/09 职场文书
解决Python字典查找报Keyerror的问题
2021/05/26 Python
Redis Lua脚本实现ip限流示例
2022/07/15 Redis