Html
    Css
    Js

    
                        
  *{
      margin: 0;
      padding: 0;
    }
    .heart{
      position:absolute;
      left: 50%;
      top:50%;
      margin-left: -150px;
      margin-top: -135px;
      width: 300px;
      height:270px;
      background: transparent;
      /*box-shadow: 2px 2px 5px #000;*/
      filter:drop-shadow(0px 0px 20px rgb(255,20,20));//阴影实现:filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);
      animation: test 1s linear infinite;
    }
    .heart:before,
    .heart:after{
      content: "";
      position: absolute;
      left: 150px;
      width: 150px;
      height: 240px;
      background: rgb(255,0,0);
      border-radius: 150px 150px 0 0;
      transform:rotate(-45deg);
      transform-origin: 0 100%;
    }
    .heart:after{
      left: 0;
      transform:rotate(45deg);
      transform-origin: 100% 100%;
    }
    @keyframes test{
      0%{
        transform: scale(0.8,0.8);
        opacity: 1;
      }
      25%{
        transform: scale(1,1);
        opacity: 0.8;
      }
      100%{
        transform: scale(0.8,0.8);
        opacity: 1;
      }
    }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

CSS3跳动的红心

简单的CSS3小作品,理解过后有助于对CSS3的学习

0