MOMO有话要说
大家好,我是MOMO,今天跟大家分享CSS3一些新特性,希望对大家编程内功有所帮助。我们将会不断的推出Java、C++/C、Python、Linux、系统运维等有关编程技术的视频,敬请期待
CSS3出来之前,做一个动画效果都要是用flash去实现;而如今轻轻松松几行代码可以搞定,无疑是增强了前端开发的效率。就让MOMO带着大家一起走进随心而动的世界吧。
实现思路
一、定义一个背景
如图片所示,我们需要绘画一个背景,背景颜色为粉红色。是用div标签实现。
二、绘心
接下来就是我们的重头戏,这里分为3个步骤实现。先要确定心摆放的位置,然后分别描绘两颗半心。
1.定位
2.绘画左半边心
一颗心实际上由两颗半边心完成的,如图所示,我们需要定义一个块级元素,通过设置圆角属性和旋转来完成。
2.1 CSS样式定义
2.3 设置圆角属性和旋转
CSS3圆角只需设置一个属性:border-radius(含义是"边框半径")。你为这个属性提供一个值,就能同时设置四个圆角的半径。所有合法的CSS度量值都可以使用:em、ex、pt、px、百分比等等。
3.绘画右半边心
左半边的心描绘出来后,右半边的实现就会简单很多,是一样的套路。只需要修改旋转的方向既可。
由此可见,两颗心已经就紧紧靠在一起啦!
4.两颗半边心完美结合
最后把多余的边框去掉,把两颗半边心的颜色设置为一样,就完美实现啦。现在看来,是不是很简单呢?
那么,问题来了?
如何实现跳动呢?
这就需要设置动画属性了!
三、动画(让心跳动起来)
3.1 观察
一颗心的跳动是有规律的
先是保持不动,再到向前跳动,然后再还原不动,这里就是一颗心跳动起来的效果,那么这三种状态就可以用关键帧keyframes来定义。
3.2 设置关键帧
/*定义关键帧列表,实现 跳动的效果*/
@-webkit-keyframeshearttd{
/*以百分比来分配样式效果,此处分为三个状态*/
%{
/*保持不变*/
-webkit-transform:scale(1);
}
50%{
/* transform 对元素进行旋转(translate)、缩放(scale)、移动(rotate)或倾斜(skew)。scale(1.5):表示该元素放大至1.5倍,原始属性为1。
*/
-webkit-transform:scale(1.5);
}
100%{
-webkit-transform:scale(1);
}
}
3.3使用关键帧
.heart{
/* 动画:animation,
关键帧列表名称:hearttd,
所需花费的时间秒:1.5s,
播放关键帧次数,infinte表示循环播放。
*/
-webkit-animation:hearttd1.5sinfinite;
width:120px;
height:120px;
position:absolute;/*使用定位属性来定位*/
top:300px;
left:120px;
/*border: 1px solid;/* 设置边框,后期会删除*/*/
}
四、练习
制作一颗跳动的心并不难,难的是思路。那么,接下来你可以完成如下效果吗?
到此,分享结束,敬请期待下次分享,如有疑惑可关注公众号与站长联系。
想学习巫老师录制的高等数学,请点击以下链接:
关注编程攻略微信公众号,与你分享编程技术知识,和IT最新咨询。
领取专属 10元无门槛券
私享最新 技术干货