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>

  • 相关阅读:
    asp.net Ctrl+回车提交
    Request.Form.Keys保存的是什么?
    让iframe子窗体取父窗体地址栏参数(querystring)
    Repeater在无数据记录时显示类似GridView空模板(EmptyDataTemplate)
    jQuery与javascript对照学习(获取父子前后元素)
    internet缓存Temp中的tmp文件
    C#反射遍历一个对象属性(小技巧)
    silverlight序列化反序列化,在c#其他程序反序列化
    Silverlight序列化反序列化(json.net)
    卸载oracle
  • 原文地址:https://www.cnblogs.com/hbqfr/p/6040057.html
Copyright © 2011-2022 走看看