前几天我在极客学院上学习css3动画有关视频,非常感兴趣,收获如下。
(一)嫦娥飞入飞出的效果
我们的目标是:鼠标移到a元素上,嫦娥飞进月亮,而且要有一种从远处来的模糊感,就是大俗话里的“仙气”;鼠标移走,嫦娥也飞离。
先分析这个要求,从中我们可以知道这涉及到两个动画,一个是位置上的改变,另一个是透明度的改变。
简单介绍下rgba;
rgba(0,0,0,0.5);//正如英文字母所预示那样,RGB是三色,那么A是什么?A是Alpha,即透明度,值为1----不透明。
主体body里是:
<a href="#点击后链接的网址" class="change " target="_blank">
<img src="#嫦娥" alt="" />
</a>
那么想要实现鼠标移入移出对应嫦娥的飞入飞出,我们需要这么来做:
1.添加夜空圆月做背景
.change{
background:url(夜空图URL) no-repeat center;
...}
2..在嫦娥上添加动画,先来设置鼠标没有移上a元素时:
img{
display:block;
width:300px;
height:284px;
opacity:0;//透明度为0,即嫦娥图不显现
-webkit-transform:translate(-100px,-100px);
//以父元素为基准(父元素是a标签,我们设置它长宽,使其成为自动居中长方形区域,那么就是左上角的位置向上,向左各100px),定义了嫦娥飞入的初始位置
transform: translate(-100px,-100px);
-webkit-transition:opacity 1s ease-in-out 0.5s,-webkit-transform 1s ease-in-out;
//下面transition的参数表明
//我们要对opacity设置过渡效果
//持续时间为1s,也就是嫦娥要飞一秒
//以慢速开始和结束
//在鼠标移到a标签上0.5s后开始动画
//注意:这个有两个动画效果,一个是opacity,另一个是transform
//transform 的解释请直接访问w3school.
t