>>:Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Heartbeattitle>

  <style>
    body {
      margin: 0;
      background-color: black;
    }

    /*心外面的盒子*/
    .heart {
      margin: 50%;
      width: 100px;
      height: 100px;
      border-radius: 10px;
      box-shadow: 0 0 5px 0 red;
      transform: scale(1);
      /*边框动画*/
      animation: heartbeat 1s linear infinite alternate;

    }

    /*左右心 共同属性设置*/
    .heartL, .heartR {
      float: left;
      margin-top: 6px;
      width: 50px;
      height: 80px;
      background-color: red;
      box-shadow: 0 0 10px 0 red;
      annimation: hearts 1s linear infinite alternate;
    }

    /*左边心*/
    .heartL {
      border-radius: 50px 50px 0 0;
      transform: translateX(14px) rotate(-45deg);
    }

    /*右边心*/
    .heartR {
      border-radius: 50px 50px 0 0;
      transform: translateX(-14px) rotate(45deg);
    }

    /*关键帧设置*/
    /*边框的动画*/
    @keyframes heartbeat {
      0% {
        transform: scale(1.1);
        box-shadow: 0 0 1px 0 red;
      }
      100% {
        transform: scale(1);
        box-shadow: 0 0 10px 0 red;
      }
    }

    /*心的阴影变化 关键帧*/
    @keyframes hearts {
      0% {
        box-shadow: 0 0 0 0 red;
      }
      100% {
        box-shadow: 0 0 10px 0 red;
      }
    }
  style>
head>
<body>
<div class="heart">
  <div class="heartL">div>
  <div class="heartR">div>
div>

body>
html>

>>：????????

网页-前端-练习题-Heartbeat_关键帧

 

-------------------------------------------------------------------------------------------------