来自 详解CSS3绘制会跳动的爱心

CSS3与HTML5为网页设计提供了更多的便捷，同时丰富的动画效果也为网页增添了许多鲜活色彩，现在，让我们一起走进CSS3，学习使用CSS3的新增属性绘制一些简单的图示。

今天要教大家制作的是一个会跳动的爱心。

没了DEMO怎么行，点我查看
heart
从图中可以看见，红色线部分所组成的就是一个爱心。

经过分析，我们将爱心的组成方法拆分开来，如下图：heart-2

图片构成的方案已经确定，接着我们看看如何利用CSS3代码来实现这一的效果。

首先，我们只需要一个div来包裹这个爱心，通过简单的计算，一个美观的爱心宽高比约为1.2:1

我们创建一个宽200px，高165px的div层，并将其position设置为relative以控制子元素的定位。

.myheart {
    width: 200px;
    height: 165px;
    position: relative;
}

接着我们会用到CSS中的两个伪类，:before和:after,利用before和after分别创建爱心两边的图形

.myheart:before, .myheart:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 165px;
    background: red;
    border-radius: 50px 50px 0 0;
}

宽度为父元素的一半，高度相同，并且利用border-radius使其获得一个半圆形的边。

这样一个如图2的样子就创建好了。接下来我们需要做的是为before和after进行位置和角度的调整

那么，通过上图中的图4我们可以看见，要使两个图形拼成爱心的形状，需要使before的左下角的点与after右下角的点重合

首先我们来调整before的位置和角度

.myheart:before {
    left: 100px;
    top: 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
}

利用transform中的rotate使其旋转-45deg，transform-orgin设置为left bottom使before基于左下角的点进行变形，让left等于100px后即使得before左下角的点移动至父容器水平方向的中间。

接着调整after的位置和角度：

.myheart:after {
    left: 0;
    top: 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;
}

基于右下角的点进行旋转，这样就会使得before左下角与after右下角重合。

这样一个爱心就创建完成啦！可是它不会跳啊，别着急，接下来我们利用animation和transform的scale（缩放）为他创建一个跳动的动画

.myheart {
    -webkit-animation: heartjump 1s infinite ease-out;
    -moz-animation: heartjump 1s infinite ease-out;
    -o-animation: heartjump 1s infinite ease-out;
    animation: heartjump 1s infinite ease-out;
}
@-webkit-keyframes heartjump {
    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 heartjump {
    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 heartjump {
    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 heartjump {
    0%, 60%, 75%, 90%, 100% {
        transform: scale(1);
    }
    15% {
        transform: scale(0.6);
    }
    30% {
        transform: scale(1);
    }
    45% {
        transform: scale(0.7);
    }
}

图文中若有措辞不当之处请予以谅解并提出，以便将更好的教学文章呈现给大家。

标签：CSS

你的评论