zoukankan      html  css  js  c++  java
  • 纯CSS制作“跳动的心”demo

    <!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 {
                 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;
                 220px;
                height: 220px;
                border-radius: 220px;
            }

            .center {
                 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>

  • 相关阅读:
    人月神话2
    cJson 常见用法
    Python C扩展
    动态链接--运行时加载dlopen
    mtrace 简介
    Linux coredump
    动态链接--so的搜索过程
    线程同步--条件变量
    编译过程学习
    Linux 信号
  • 原文地址:https://www.cnblogs.com/hbqfr/p/6040057.html
Copyright © 2011-2022 走看看