<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Red Heart</title>
    <style>
        html, body {
            height: 100%;
        }

        body {
            margin: 0;
            padding: 0;
            background: #ffa5a5;
            background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);
        }

        .chest {
            width: 500px;
            height: 500px;
            margin: 0 auto;
            position: relative;
        }

        .heart {
            position: absolute;
            z-index: 2;
            background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
            animation: beat 0.7s ease 0s infinite normal;
        }

        .heart.center {
            background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
        }

        .heart.top {
            z-index: 3;
        }

        .side {
            top: 100px;
            width: 220px;
            height: 220px;
            border-radius: 220px;
        }

        .center {
            width: 210px;
            height: 210px;
            bottom: 100px;
            left: 145px;
            /*transform: rotate(45deg);*/
        }

        .left {
            left: 62px;
        }

        .right {
            right: 62px;
        }

        @keyframes beat {
            0% {
                transform: scale(1) rotate(225deg);
                box-shadow:0 0 40px #d5093c;
            }

            50% {
                transform: scale(1.1) rotate(225deg);
                box-shadow:0 0 70px #d5093c;
            }

            100% {
                transform: scale(1) rotate(225deg);
                box-shadow:0 0 40px #d5093c;
            }
        }
    </style>
</head>
<body>
    <div class="chest">
        <div class="heart left side top"></div>
        <div class="heart center"></div>
        <div class="heart right side"></div>
    </div>
</body>
</html>

纯CSS制作“跳动的心”demo的更多相关文章

  1. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. CSS 魔法系列：纯 CSS 绘制图形（心形、六边形等）

    <CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...

  3. 纯CSS制作三角（转）

    原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...

  4. 如何使用纯 CSS 制作四子连珠游戏

    序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...

  5. 如何使用纯CSS制作特效导航条？

    先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...

  6. No.5 - 纯 CSS 制作绕中轴旋转的立方体

    body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...

  7. 纯CSS制作空心三角形和实心三角形及其实现原理

    纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...

  8. 每日CSS_纯CSS制作进度条

    每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...

  9. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

随机推荐

  1. C 语言中包含的标准头文件（24个）

    <assert.h><complex.h><ctype.h><errno.h><fenv.h><float.h><intt ...

  2. hdu 5640 King's Cake（BestCoder Round #75）

    King's Cake Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total ...

  3. AVCaptureSession 照相时获取 AVCaptureVideoPreviewLayer尺寸

    http://stackoverflow.com/questions/14153878/avcapturesession-preset-photo-and-avcapturevideopreviewl ...

  4. UVa 10900 So you want to be a 2n-aire? （概率DP，数学）

    题意:一 个答题赢奖金的问题,玩家初始的金额为1,给出n,表示有n道题目,t表示说答对一道题目的概率在t到1之间,每次面对一道题,可以选择结束游戏, 获得当 前奖金:回答下一道问题,答对的概率p在t到 ...

  5. 10款无需编程的App DIY开发工具

    10款无需编程的App DIY开发工具 你有一个很棒的创意但不会编程怎么办?外包.合伙开发还是从零学编程?这里提供另外一种方式--使用无需编程的App  DIY开发工具.DIY开发工具不仅节省了开发时 ...

  6. 关于在Eclipse中使用正则表达式替换的一点记录（使用正则表达式的分组）

    今天在工作中遇到了点替换的麻烦事,由于数据类进行了变动,具体情况是这样的,需要将下面的代码: player.skillData[i].name 替换为: player.skillData.getSki ...

  7. Oracle 的 INSERT ALL和INSERT FIRST

    描述性的东西就不来了,搞技术的,最喜欢实在的实例.通过下面的例子,大家很快就能明白insert all 与 insert first 的功能,比文字描述更通俗易懂. 一.INSERT ALL 不带条件 ...

  8. iOS 逆向之ARM汇编

    最近对iOS逆向工程很感兴趣. 目前iOS逆向的书籍有: <Hacking and Securing IOS Applications>, <iOS Hacker's Handboo ...

  9. 错误号码2003 Can&#39;t connect to MySQL server &#39;localhost&#39; (0)

    错误描写叙述 错误原因 近期,我一直都能够用SQLyog连接本地数据库,可是近几天却无法连接:而且一直都报上述错误,我查阅了非常多资料,发现有非常多中说法 总结一下 第一,MySQL中的my.ini出 ...

  10. Select模型原理

    Select模型原理 利用select函数,推断套接字上是否存在数据,或者是否能向一个套接字写入数据.目的是防止应用程序在套接字处于锁定模式时,调用recv(或send)从没有数据的套接字上接收数据, ...