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 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5 canvas绘制放射性渐变色效果
Jan 04 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
html5 乒乓球(碰撞检测)实例二
Jul 25 HTML / CSS
【HTML5】Canvas绘制简单图片教程
May 13 HTML / CSS
Html5 Geolocation获取地理位置信息实例
Dec 09 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 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 将字符串按大写字母分隔成字符串数组
2010/04/30 PHP
php 文件上传后缀名与文件类型对照表(几乎涵盖所有文件)
2010/05/16 PHP
如何使用FireFox插件FirePHP调试PHP
2013/07/23 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP模拟asp中response类实现方法
2015/08/08 PHP
在php的yii2框架中整合hbase库的方法
2018/09/20 PHP
linux mint下安装phpstorm2020包括JDK部分的教程详解
2020/09/17 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
JavaScript 的继承
2011/10/01 Javascript
JavaScript实现两个Table固定表头根据页面大小自行调整
2014/01/03 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
Lua表达式和控制结构学习笔记
2014/12/15 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
拥有一个属于自己的javascript表单验证插件
2016/03/24 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
2019/06/05 Javascript
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
Weex开发之地图篇的具体使用
2019/10/16 Javascript
原生JS实现留言板
2020/03/26 Javascript
使用Python的web.py框架实现类似Django的ORM查询的教程
2015/05/02 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
python如何通过闭包实现计算器的功能
2020/02/22 Python
python3实现飞机大战
2020/11/29 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
自考毕业生自我鉴定
2013/11/04 职场文书
销售心得体会
2014/01/02 职场文书
法人授权委托书范本
2014/04/04 职场文书
大学生党员自我剖析材料
2014/10/06 职场文书
2015年大学生入党自荐书
2015/03/24 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
Mysql数据库表中为什么有索引却没有提高查询速度
2022/02/24 MySQL