切入口(qierukou.com)讯：用纯css3画跳动的红桃心，需要用到css3的圆角属性 border-radius ，以及css3的旋转属性 transform-origin ，画出的红桃心的跳动也是css3来制作的，用到了animation 属性。在实际项目开发中，border-radius圆角属性会用到比较多，手机等移动设备的网页中凡事圆角肯定采用这个方法来实现，因为手机等移动设备都是支持css3的，pc网页项目中也可以采用border-radius，但是考虑兼容性问题，代码会比较沉长，下面会涉及到。

对于ie浏览器最高兼容到ie9，因为ie8以及以下是没有圆角概念的，ie6~ie8的旋转可以通过 matrix 滤镜来实现，但是该旋转同css3的旋转的使用方法是不一样的，所以需要反复调整值来实现一样效果。这里我们制作的红桃心是不支持ie6~ie8的，既然它不支持，我们也应当选择放弃。

首先我们先定义一个红桃心的层

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

然后为它添加css样式

.heart {
   position: relative;
   width: 140px;
   height: 115px;
}

然后我们会用到css3的伪类:before 和 :after ，我们可以将它当做两个单独的层来使用。如果为了更好的兼容性，我们也可以定义两个层 .before , .after 来替代这两个伪类元素。

用:before来制作红桃心的左半边，不同的是定位和旋转方式的不同。

.heart::before {
   content: "";
   position: absolute;
   left: 70px;
   top: 0;
   width: 70px;
   height: 115px;
   background: red;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(-45deg); /* Safari 和 Chrome */
   -moz-transform: rotate(-45deg); /* Firefox */
   -o-transform: rotate(-45deg); /* Opera */
   transform: rotate(-45deg);
   -ms-transform:rotate(45deg); /* IE 9 */
   -webkit-transform-origin: left bottom; /* Safari 和 Chrome， WebKit是Safari和Google Chrome浏览器的渲染引擎，所以该写法针对所有基于webkit引擎的浏览器 */
   -moz-transform-origin: left bottom; /* Firefox, -moz-是火狐公司mozilla的缩写，为固定写法，凡事看到这样的写法就是针对火狐浏览器的 */
   -o-transform-origin: left bottom; /* Opera，-o-代表Opera，凡是看到这种就是针对opera的 */
   -ms-transform-origin: left bottom; /* IE 9 */
   transform-origin: left bottom; /*可以改变元素的中心点，使其发生偏移，同background-position一样定位方式，接受两个值，第一个值为水平方向位置，第二个值为垂直方向位置，默认两者都是居中*/
}

右边的部分也采用同样的方法制作

.heart::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 70px;
   height: 115px;
   background: red;
   border-radius: 50px 50px 0 0;
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   -webkit-transform-origin: right bottom;
   -moz-transform-origin: right bottom;
   -o-transform-origin: right bottom;
   transform-origin: right bottom;
}

这个时候我们在浏览器中预览一下，就会呈现一个红彤彤的桃心。这个时候我们如何让它跳动起来呢——用css3的animation属性就可以轻松完成这个效果。在创建animation动画的时候，我们需要先了解@keyframes规则，@keyframes 规则用于创建动画。在 @keyframes 中规定某个时间的某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。当@keyframes 中创建动画之后，我们还需要将它绑定到某个选择器，这样它才会工作。PS: Chrome 和 Safari 需要前缀 -webkit-，Internet Explorer 9，以及更早的版本，不支持 @keyframe 规则或 animation 属性。

.heart {
    -webkit-animation: jump 1s infinite ease-out;
    -moz-animation: jump 1s infinite ease-out;
    -o-animation: jump 1s infinite ease-out;
    animation: jump 1s infinite ease-out;
}
@-webkit-keyframes jump {
    0%, 60%, 75%, 90%, 100% {
        -webkit-transform: scale(1);
    }
    15% {
        -webkit-transform: scale(0.6);
    }
    30% {
        -webkit-transform: scale(1);
    }
    45% {
        -webkit-transform: scale(0.7);
    }
}
@-moz-keyframes jump {
    0%, 60%, 75%, 90%, 100% {
        -moz-transform: scale(1);
    }
    15% {
        -moz-transform: scale(0.6);
    }
    30% {
        -moz-transform: scale(1);
    }
    45% {
        -moz-transform: scale(0.7);
    }
}
@-o-keyframes jump {
    0%, 60%, 75%, 90%, 100% {
        -o-transform: scale(1);
    }
    15% {
         -o-transform: scale(0.6);
    }
    30% {
        -o-transform: scale(1);
    }
    45% {
        -o-transform: scale(0.7);
    }
}
@keyframes jump {
    0%, 60%, 75%, 90%, 100% {
        transform: scale(1);
    }
    15% {
        transform: scale(0.6);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(0.7);
    }
}