你的位置:首页 > 网页设计

[网页设计]跳动的心

不用图片,使用CSS3做出一个跳动的心。

HTML:

    <div class="box">      <div class="left"></div>      <div class="right"></div>    </div>

首先两个div浮动,左上和右上角变圆:

      .box{      margin: 100px;      }      .left,.right{        float: left;      }      .box div{        height:160px;        width: 100px;        border-radius: 50px 50px 0 0;        background: red;      }            

变成:

然后让两个div旋转一下,左边的以右下角为旋转点正时针转45度,右边的以左下角为旋转点逆时针转45度,加点阴影:

.left{            transform-origin: 100% 100%;        transform: rotate(45deg);        box-shadow: 8px 10px 10px #888888;        }.right{                transform-origin: 0% 100%;        transform: rotate(-45deg);        box-shadow: -10px -1px 10px #888888;         }

心形出来了:

让心动起来,加点动画吧:

    .box div{        animation: lb 1s cubic-bezier(0.3,0.4,0.3,1) 0s infinite;        border: 0px solid red;/*这个不能少*/         }    @keyframes lb{        0%{          border: 10px solid red;          border-radius: 58px 58px 0 0;        }        50%{          border: 20px solid red;          border-radius: 66px 66px 0 0;        }        100%{          border:0px solid red;          border-radius: 50px 50px 0 0;        }      }

好了,一颗跳动的心就完成了。

完整CSS:

    <style>      .box{        margin: 100px;      }      .left,.right{        float: left;      }      .box div{        height:160px;        width: 100px;        border-radius: 50px 50px 0 0;        background: red;        animation: lb 1s cubic-bezier(0.3,0.4,0.3,1) 0s infinite;        border: 0px solid red;      }      .left{            transform-origin: 100% 100%;        transform: rotate(45deg);        box-shadow: 8px 10px 10px #888888;          }      @keyframes lb{        0%{          border: 10px solid red;          border-radius: 58px 58px 0 0;        }        50%{          border: 20px solid red;          border-radius: 66px 66px 0 0;        }        100%{          border:0px solid red;          border-radius: 50px 50px 0 0;        }      }      .right{                transform-origin: 0% 100%;        transform: rotate(-45deg);        box-shadow: -10px -1px 10px #888888;         }    </style>