• 展开微博窗口
  • QQ:52619941
  • 微信:cnmemory
  • 展开分类目录
  • 还没有账号?

Memory

详解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);
	}
}

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

码字很辛苦,转载请注明来自雨林寒舍《详解CSS3绘制会跳动的爱心》

评论

  1. 折原诗织 #1

    [dx泪奔]要看萝莉爱大叔大尺度照片,就到→ http://meinv.pro

    回复
    2016-01-13
  2. 李小玉 #2

    [色眯眯]

    回复
    2016-01-11
  3. 耀 #3

    界面设计的很大气

    回复
    2016-01-9
  4. @Life #4

    这个不错,心下面可以加一点圆角

    回复
    2014-08-9
  5. 22 #5

    ..

    回复
    2014-08-7