<!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. nyoj 10 skiing（记忆化搜索）

    skiing 时间限制:3000 ms  |  内存限制:65535 KB 难度:5   描述 Michael喜欢滑雪百这并不奇怪, 因为滑雪的确很刺激.可是为了获得速度,滑的区域必须向下倾斜,而且当 ...

  2. 转载Repository 和Unit of work的使用说明

    利用Repository and Unit of Work重构项目 文章索引和简介 项目最基础的东西已经结束了,但是现在我们的项目还不健全  不利于测试 重复性代码多   层与层之间耦合性高  不利于 ...

  3. 用Swashbuckle给ASP.NET Core的项目自动生成Swagger的API帮助文档

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用Swashbuckle给ASP.NET Core的项目自动生成Swagger的API帮助文档.

  4. Linux下升级python版本

    转载自:http://lovebeyond.iteye.com/blog/1770476 CentOS下的Python版本一般都比较低,很多应用都需要升级python来完成.我装的centOS的默认的 ...

  5. UdpClient的Connect究竟做了什么(转)

    最近在写一个音频通信的系统,因为需要还要处理其他事件,所以就自己设计底层的通信协议,用了不少底层的Socket编程(.Net Framework),搞清楚了不少细节问题. 先做一些铺垫工作.音频系统服 ...

  6. [置顶] iOS开发规范

    iOS代码编程规范 详细讲解代码该如何写,怎样写,如何规范. 什么样的代码是最美的,本文档会给你讲解 iOS代码编程规范........................................ ...

  7. 处理get中的中文乱码情况

    1 最基本的乱码问题.这个乱码问题是最简单的乱码问题.一般新会出现.就是页面编码不一致导致的乱码.<%@ page language="java" pageEncoding= ...

  8. C++ 预编译头文件

    1.解决什么问题? C++ 编译器是单独,分别编译的,每个cpp文件,进行预编译(也就是对#include,define 等进行文本替换),生成编译单元.编译单元是一个自包含文件,C++编译器对编译单 ...

  9. [AngularJS] Directive with Transcluded Elements

    Create a wrapWith directive using advanced transclusion techniques. transclude - compile the content ...

  10. android141 360 安装软件管理java代码

    AppManagerActivity package com.itheima52.mobilesafe.activity; import android.app.Activity; import an ...