11 - CSS3 - 边框圆角 - 跳动的心

---

本文是针对刚学编程的小白,都是一些基础知识,如果想了解更多深层一点的东西,欢迎移步本人博客!!

博客地址 点击跳转

---

---

< ! ---------- HTML ----------- >

<div class="all">
    <div class="left"></div>
    <div class="right"></div>
    <div class="bottom"></div>
    <p>学前端, 做高帅富白富美!!!</p>
</div>

< ! --------- Style --------------- >

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .all{
            width: 400px;
            height: 400px;
            margin: 100px auto;
            /*border: 1px solid #000;*/
            position: relative;
        }
        .all .left{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 8px;
            top: 0;
        }
        .all .right{
            width: 200px;
            height: 200px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            right: 8px;
            top: 0;
        }
        .all .bottom{
            width: 201px;
            height: 201px;
            background-color: red;
            position: absolute;
            bottom: 113px;
            left: 100px;
            transform: rotateZ(45deg);
            border-top-left-radius: 50%;
        }
        .left, .right, .bottom{
            animation: sport 0.5s linear 0s infinite normal;
        }
        @keyframes sport {
            from{
                transform: scale(1) rotateZ(45deg);
            }
            to{
                transform: scale(1.1) rotateZ(45deg);
            }
        }
        .all p{
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>

< ! --------- 效果展示 ---------- >

**跳动的心**