zoukankan      html  css  js  c++  java
  • 心跳的动图制作

    代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>心跳</title>
    <!--html标签默认width:885px;height:500px
    body标签默认 885px;height:500px-->
    <style>
    html,body {
    height: 100%; /*885px;height:740px*/
    /*background-color: red;*/
    }
    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;
    /*linear-gradient(direction, color-stop1, color-stop2, ...);*/
    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 {
    220px;
    height: 220px;
    top: 100px;
    border-radius: 220px;
    }
    .center {
    210px;
    height: 210px;
    bottom: 100px;
    left: 145px;

    }
    .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>

    显示:

  • 相关阅读:
    top 命令
    通过公网访问内网的几种方式总结
    借助IDE到处Runnable JAR 的步骤
    Java SE 基础知识(String,Array)
    Java SE 基础知识(二)
    周记 2014.12.13
    nginx 总结
    在VPS上配置SS
    Markdown 语法手册
    ASCII码表
  • 原文地址:https://www.cnblogs.com/yanyanstyle/p/11439496.html
Copyright © 2011-2022 走看看