爱心跳动效果 CSS实现

实现效果

砰砰砰

实现原理

通过动画改变每个元素的高度，从而实现每个元素高度变化的效果，为了使每个元素依次跳动，给每个元素添加一定的延时效果，使得从效果元素依次跳动

代码分析

核心动画

一共写了5个动画，但是实现的东西都是差不多的，只是改变的高度不同，这是其中的一个动画

改变元素的高度，并且上移一段距离，这个距离就是画爱心的关键，如果没有这个移动距离，元素始终保持着下端对齐，不会摆出爱心的效果，所以这个可以根据自己的实际高度来调定。

@keyframes jump1 {

    30%,50% {

        height: 60px;

        transform: translateY(-30px);

    }

    70%,100% {

        height: 20px;

        transform: translateY(0px);

    }

}

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>爱心跳动效果</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .loveBox {

            display: flex;

            justify-content: center;

            align-items: center;

            height: 100vh;

            background-color: rgb(36, 40, 66);

        }

        .loveLine {

            height: 200px;

        }

        .loveLine li {

            float: left;

            list-style: none;

            width: 20px;

            height: 20px;

            border-radius: 10px;

            margin-right: 10px;

        }

        .loveLine li:nth-child(1) {

            background-color: red;

            animation: jump1 3s infinite;

        }

        .loveLine li:nth-child(2) {

            background-color: rgb(238, 118, 5);

            animation: jump2 3s 0.2s infinite;

        }

        .loveLine li:nth-child(3) {

            background-color: rgb(106, 10, 233);

            animation: jump3 3s 0.4s infinite;

        }

        .loveLine li:nth-child(4) {

            background-color: darkmagenta;

            animation: jump4 3s 0.6s infinite;

        }

        .loveLine li:nth-child(5) {

            background-color: rgb(245, 11, 147);

            animation: jump5 3s 0.8s infinite;

        }

        .loveLine li:nth-child(6) {

            background-color: rgb(32, 9, 231);

            animation: jump4 3s 1.0s infinite;

        }

        .loveLine li:nth-child(7) {

            background-color: rgb(36, 170, 81);

            animation: jump3 3s 1.2s infinite;

        }

        .loveLine li:nth-child(8) {

            background-color: #f62e74;

            animation: jump2 3s 1.4s infinite;

        }

        .loveLine li:nth-child(9) {

            background-color: red;

            animation: jump1 3s 1.6s infinite;

        }

        @keyframes jump1 {

            30%,

            50% {

                height: 60px;

                transform: translateY(-30px);

            }

            70%,

            100% {

                height: 20px;

                transform: translateY(0px);

            }

        }

        @keyframes jump2 {

            30%,

            50% {

                height: 120px;

                transform: translateY(-60px);

            }

            70%,

            100% {

                height: 20px;

                transform: translateY(0px);

            }

        }

        @keyframes jump3 {

            30%,

            50% {

                height: 160px;

                transform: translateY(-75px);

            }

            70%,

            100% {

                height: 20px;

                transform: translateY(0px);

            }

        }

        @keyframes jump4 {

            30%,

            50% {

                height: 180px;

                transform: translateY(-60px);

            }

            70%,

            100% {

                height: 20px;

                transform: translateY(0px);

            }

        }

        @keyframes jump5 {

            30%,

            50% {

                height: 200px;

                transform: translateY(-45px);

            }

            70%,

            100% {

                height: 20px;

                transform: translateY(0px);

            }

        }

    </style>

</head>

<body>

    <div class="loveBox">

        <ul class="loveLine">

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </div>

</body>

</html>

感觉最近的文章内容都是很简单的东西，之后挑战一些有难度的东西吧！

更多阅读

3d悬停分层效果

充电水波摇晃效果
旋转水滴加载效果
抖音超火的罗盘时钟效果
圆盘时钟效果
文字抖动效果
旋转魔方效果
文字闪烁效果
加载动画效果
炫彩流光按钮
原生js轮播图效果
文字折叠效果

爱心跳动效果 CSS实现的更多相关文章

  1. ios 基于CAEmitterLayer的雪花，烟花，火焰，爱心等效果demo(转)

    转载自:http://blog.csdn.net/mad2man/article/details/16898369 分类: cocoa SDK2013-11-23 11:52 388人阅读 评论(0) ...

  2. ios 基于CAEmitterLayer的雪花，烟花，火焰，爱心等效果demo

    demo功能:基于CAEmitterLayer的雪花,烟花,火焰,爱心等效果. demo说明:基于Core Animation的粒子发射系统,粒子用CAEmitterCell来初始化. 粒子画在背景层 ...

  3. HTML5+CSS3制作无限滚动与文字跳动效果

    ㈠用HTML5+CSS3做无限滚动效果 ⑴逻辑分析 ⑵实践示例 前5张图片为所有图片显示区,假设总长度为1100px: 后面出现的五张图片为克隆区,只是将前面的图片拷贝了一份: 然后将前五张和后五张的 ...

  4. 超出区域文字显示为省略号或者剪切效果——CSS的生僻操作

    每门语言总有那么一些不太常用,却又不可或缺的语法操作.下面说一下,在HTML文件中,如何设置用 "省略号" 和 "剪切" 代替大量文字的效果. 以下是HTML的 ...

  5. 前端页面loading效果(CSS实现)

    当首页内容或图片比较多时,加载时间会比较长,此时可能出现页面白屏的情况,用户体验较差.所以,在页面完全加载出来之前,可以考虑加入loading效果,当页面完全加载完后,是loading消失即可. 1. ...

  6. ie8兼容半透明效果css

    1.opacity:0.5;(半透明效果在ie9及以上版本适用,ie8及以下不兼容) 解决办法:在css中加入filter: progid:DXImageTransform.Microsoft.Alp ...

  7. 哇塞！HTML5 实现的雨滴效果 CSS发抖

    http://dreamsky.github.io/main/blog/rainy-day/ Rainy Day – 哇塞! HTML5 实现的雨滴效果 http://www.webhek.com/m ...

  8. ##常用效果css##

    1    绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块.元素被设置成,absolute,原有的位置会被占用,设为 relative原位置 ...

  9. 毛玻璃效果 css

    毛玻璃效果 <style> .container{ width: 287px; height: 285px; background-image: url(img/background.pn ...

随机推荐

  1. 解决Spring中使用Example无法查询到Mongodb中的数据问题

    1 问题描述 在Spring Boot中使用Mongodb中的Example查询数据时查询不到,示例代码如下: ExampleMatcher matcher = ExampleMatcher.matc ...

  2. Salesforce学习之路（三）利用VS Code结合Git开发Salesforce

    在前面说了一些有关Admin的知识,但实际开发运用中,仅凭Admin的配置很难满足项目的定制化需求,因此基于CRM的二次开发则应运而生. 由于国内资料相对较少,所以很多入门新手无处下手,那这里就简单介 ...

  3. day18.进程2

    1 进程调度算法(了解) -先来先服务调度算法 -短作业优先调度算法 -时间片轮转法 -多级反馈队列 2 同步异步,阻塞非阻塞(了解) 1 同步调用:提交了以后,一直等待结果返回 2 异步调用:提交了 ...

  4. openpyxl 库

    1. 简介与安装 2.具体示例 2.1 获取workbook与sheet对象 2.2 访问单元格及其值 2.3 写数据 2.4 设置样式 1. 简介与安装 openpyxl 简介 openpyxl 是 ...

  5. 2021S软件工程——个人阅读作业2

    2021S软件工程--个人阅读作业2 项目 内容 这个作业属于哪个课程 2021春季软件工程(罗杰 任建) 这个作业的要求在哪里 个人阅读作业#2 我在这个课程的目标是 了解并熟悉软件开发的具体流程, ...

  6. 869. Reordered Power of 2

    Starting with a positive integer N, we reorder the digits in any order (including the original order ...

  7. PAT 乙级 -- 1009 -- 说反话

    题目简述 给定一句英语,要求你编写程序,将句中所有单词的顺序颠倒输出.       输入格式:测试输入包含一个测试用例,在一行内给出总长度不超过80的字符串.字符串由若干单词和若干空格组成,其中单词是 ...

  8. Python2中的urllib、urllib2和 Python3中的urllib、requests

    目录 Python2.x中 urllib和urllib2 常用方法和类 Python3.x中 urllib requests Python2.x中 urllib和urllib2 urllib 和 ur ...

  9. layui的loading加载中

    var load = layer.load(1, { content: '数据加载中', shade: [0.4, '#393D49'], // time: 10 * 1000, success: f ...

  10. VBO、VAO和EBO

    Vertex Buffer Object 对于经历过fixed pipeline的我来讲,VBO的出现对于渲染性能提升让人记忆深刻.完了,暴露年龄了~ //immediate mode glBegin ...