网页-前端-练习题-Heartbeat

>>:Source Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HeartBeat</title>
<style>
body{
    background-color:black;
}
.heartborder{
    margin-top:100px;
    margin-left:30%;
    width:100px;
    height:100px;
    border-radius:10px;
    box-shadow:0 0 10px 0 red;
    transform:scale(1);
    animation: borderact 1s linear infinite alternate;

}
.heartL,.heartR{
    float:left;
    width:50px;
    height:70px;
    background-color:red;
    border-radius:50px 50px 0 0 ;
    transform:scale(1);
    animation:heartaction 1s linear infinite alternate;
}
.heartL{
    margin-top:30px;
    transform:rotate(-45deg) translate(25px);
    }
.heartR{
    margin-top:30px;
    transform:rotate(45deg) translate(-25px) ;
}

.heartmiddle{
    transform:scale(1);
    animation: heartm 1s linear infinite alternate;
}

@keyframes borderact {
    0%{box-shadow:0 0 0 0 red;}
    100%{box-shadow:0 0 10px 0 red;}
    }
@keyframes heartaction {
        0%{box-shadow:0 0 0 0 red;}
        100%{box-shadow:0 0 10px 0 red;}
    }
@keyframes heartm {
    0%{ transform:scale(1);}
    100%{ transform:scale(1.1);}
}

</style>
</head>
<body>
    <div class="heartborder">
        <div class="heartmiddle">
            <div class="heartL"></div>
            <div class="heartR"></div>
        </div>
    </div>
</body>
</html>