码迷,mamicode.com
首页 > Web开发 > 详细

CSS3学习笔记(2)—左右跳动的红心

时间:2015-10-06 19:29:01      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:

还在为无法表达内心澎湃的心情而着急吗?还在为制作跳动的心而烦恼吗?哈哈~~~今天我就把代码全部奉上,为你们追妹子添点贡献,下面来看最终的动态效果(事先说明一下:我用的截屏gif制作软件是绿色版的,所以gif动态图心的抖动效果会有点慢而且卡卡的,但是实际效果很棒~~~不信你可以粘贴代码看看呗)

技术分享

 

下面把心的png图也贴出来,感兴趣的可以右键另存为试试~~~~

技术分享

 

其实上面的动画类似于我们小时候荡的秋千,也叫作“秋千动画”,一般用在想让用户点击这个图标的时候,不仅仅限制于表白用O(∩_∩)O,比如企业招聘时想让求职者点击投简历的图标进入另一个页面等。

书写这段程序的思路:

(1)先要定义一个动画,在10%,20%,30%.......100%时心形图的不同状态,当然时间段和状态都是看自己的需要设定

(2)调用动画,然后设置为无限死循环播放

 

一、先来看看HTML代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>心动时左右摇摆</title>
        <link type="text/css" rel="stylesheet" href="css/animate.css" />
    </head>
    <body>
        <img class="heart" src="img/heart.png"  />
    </body>
</html>

 

二、接着来看CSS样式(主要是CSS3)

/*定义一个名字叫heartAnimate的动画,实现心形图的放大以及旋转效果*/
@keyframes heartAnimate{ 
    0%,100%{transform:scale(1) rotate(0);}                       /*0%,100%时保持图形的原大小且不旋转*/
    10%,30%{transform: scale(0.9) rotate(3deg);}                  /*10%,30%时图形缩小成0.9倍,并且顺时针旋转3度*/
    20%,40%,60%,80%{transform:scale(1.1) rotate(-3deg);}         /*20%,40%,60%,80%时图形扩大成1.1倍,并且逆时针旋转3度*/
    50%,70%{ transform:scale(1.1) rotate(3deg);}                 /*50%,70%时图形扩大成1.1倍,并且顺时针旋转3度*/
}
@-webkit-keyframes heartAnimate{
    0%,100%{-webkit-transform: scale(1) rotate(0);}
    10%,30%{-webkit-transform:scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-webkit-transform: scale(1.1) rotate(-3deg);}
    50%,70%{-webkit-transform: scale(1.1) rotate(3deg);}
}
@-moz-keyframes heartAnimate{
    0%,100%{-moz-transform:scale(1) rotate(0);}
    10%,30%{-moz-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-moz-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -moz-transform:scale(1.1) rotate(3deg);}
}
@-o-keyframes heartAnimate{
    0%,100%{-o-transform:scale(1) rotate(0);}
    10%,30%{-o-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-o-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -o-transform:scale(1.1) rotate(3deg);}
}
@-ms-keyframes heartAnimate{
    0%,100%{-ms-transform:scale(1) rotate(0);}
    10%,30%{-ms-transform: scale(0.9) rotate(3deg);}
    20%,40%,60%,80%{-ms-transform:scale(1.1) rotate(-3deg);}
    50%,70%{ -ms-transform:scale(1.1) rotate(3deg);}
}

.heart{
    -webkit-animation: heartAnimate 1s ease infinite;    /*调用名称为heartAnimate的动画,全程1s,速度曲线是ease,无限循环播放*/
    -moz-animation: heartAnimate 1s ease infinite;
    -o-animation: heartAnimate 1s ease infinite;
    -ms-animation: heartAnimate 1s ease infinite;
    animation: heartAnimate 1s ease infinite;
}

上面的程序我的注释也写得很清楚了,感兴趣的可以自己试试看,主要就是css3中scale的放大功能和rotate的旋转功能应用,把握好状态的设置,动画效果还是很Q哒~~~

CSS3学习笔记(2)—左右跳动的红心

标签:

原文地址:http://www.cnblogs.com/lily1010/p/4857476.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!