css3跳动红心

    xiaoxiao2021-03-26  4

    原理:利用一个正方形,在他的之前之后的伪类里分别添加一个圆形。通过调整两个圆的位置,来凑成一个爱心。

    <div class="heart"></div>

    .heart{

       width:20px;

       height:20px;

       position:relative;

       background-color:#f00;

    }

    .heart:before,

    .heart:after{

        content:"";

        width:20px;

        height:20px;

       background-color:#f00;

        position:absolute;

       border-radius:100px;

    }

    .heart:before{

       top:0px;

       left:-100px;

    }

    .heart:after{

       top:-100px;

       left:0px;

    }

    然后把这个形状旋转45度,加一个阴影的效果;如果你想要心跳的的感觉就加一个动画。

    .heart{

      filter:drop-shadow(0px  0px 20px #f00);     //css3新属性.只有ie13和安卓4.4才能兼容。和box-shadow差不多的效果也是加阴影的。只不过box-shadow能加内阴影。兼容性更好一点。

      transform:rotate(45deg);

      animate:test 1s linear infinite;

    }

    @keyframes test{     //因为这个属性具有兼容性的问题,所以你还需要写一样的,只有这个头部改变的3个@-webkit-keyframes test,@-moz-keyframes test  @-ms-keyframes test

    0%{transform:rotate(45deg) scale(0.8,0.8);opacity=1; }

    25%{transform:rotate(45deg) scale(1,1);opacity=0.8; }

    100%{transform:rotate(45deg) scale(0.8,0.8);opacity=1; }

    }

    转载请注明原文地址: https://ju.6miu.com/read-600168.html

    最新回复(0)