<!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. VB.NET开发中遇到的一点小问题

    在用vb.net开发的security support时,遇到一个问题,在trainingCourses.aspx页面上增加了一个HyperLink控件 <asp:HyperLink runat ...

  2. 转载C# 对象转Json序列化

    转载原地址:  http://www.cnblogs.com/plokmju/p/ObjectByJson.html JSON Json(JavaScript Object Notation) 是一种 ...

  3. POJ 1088 滑雪 (记忆化搜索)

    题目链接:http://poj.org/problem?id=1088 题意很好懂,就是让你求一个最长下降路线的长度. dp[i][j]记录的是i j这个位置的最优的长度,然后转移方程是dp[i][j ...

  4. Java NIO类库Selector机制解析（下）

    五.  迷惑不解 : 为什么要自己消耗资源? 令人不解的是为什么我们的Java的New I/O要设计成这个样子?如果说老的I/O不能多路复用,如下图所示,要开N多的线程去挨个侦听每一个Channel ...

  5. Spring+Ibatis集成开发实例

    首先简历数据库demo(本文选mysql) 数据库脚本: CREATE TABLE `ibatis` (  `id` varchar(20) NOT NULL,  `name` varchar(20) ...

  6. 从零开始学android开发-通过WebService进行网络编程，使用工具类轻松实现

    相信大家在平常的开发中,对网络的操作用到HTTP协议比较多,通过我们使用Get或者Post的方法调用一个数据接口,然后服务器给我们返回JSON格式的数据,我们解析JSON数据然后展现给用户,相信很多人 ...

  7. codeforces Gym 100500H A. Potion of Immortality 简单DP

    Problem H. ICPC QuestTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100500/a ...

  8. 使用C# 实现文件锁

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  9. [置顶] VC++界面编程之--自定义CEdit(编辑框)皮肤

    自定义编辑框是登陆界面经常用到的效果,所以我也模仿站酷网的素材做了个. 要想继承CCustomDraw来完全自绘CEdit控件,是不太可行的方案,因为一旦你完全重绘,那么你需要额外做以下几件事: 1. ...

  10. JAVA反射机制学�

    JAVA反射机制:对于随意一个类,都可以知道这个类的全部属性和方法:对于随意一个对象,都可以调用它的随意一个方法和属性:这样的动态获取的信息以及动态调用对象的方法的功能称为java语言的反射机制. J ...