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中的calc函数浅析
Jul 10 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
Sep 14 HTML / CSS
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
布局和排版教程 纯css3实现图片三角形排列
Oct 17 HTML / CSS
CSS3属性background-size使用指南
Dec 09 HTML / CSS
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
Mar 02 HTML / CSS
详解CSS3弹性伸缩盒
Sep 21 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
Dec 16 HTML / CSS
HTML5实现移动端复制功能
Apr 19 HTML / CSS
AmazeUI 等分网格的实现示例
Aug 25 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 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 tp验证表单与自动填充函数代码
2012/02/22 PHP
详解Yii2 定制表单输入字段的标签和样式
2017/01/04 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
2014/01/07 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
用console.table()调试javascript
2014/09/04 Javascript
简易的JS计算器实现代码
2016/10/18 Javascript
JS实现的样式切换功能tableCSS实例
2016/12/30 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
2017/02/05 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
js动态引入的四种方法
2018/05/05 Javascript
JavaScript设计模式之装饰者模式定义与应用示例
2018/07/25 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
pytorch绘制并显示loss曲线和acc曲线,LeNet5识别图像准确率
2020/01/02 Python
Python2.6版本pip安装步骤解析
2020/08/17 Python
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
英国的屈臣氏:Boots博姿
2017/12/23 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
几个判断型的面试题
2012/07/03 面试题
安全生产检讨书
2014/01/21 职场文书
中班开学寄语
2014/04/04 职场文书
孝敬父母的活动方案
2014/08/28 职场文书
党性心得体会
2014/09/03 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
离婚上诉状范文
2015/05/23 职场文书
优秀毕业生主要事迹材料
2015/11/04 职场文书
2019最新版火锅店的创业计划书 !
2019/07/12 职场文书