<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body{
background: #ccc;
}
content{
position: absolute;
top: 30%;
}
#box1{
position: absolute;
border: 1px solid red;
transition: all 1s;/过渡时间/
}
#box2{
position: absolute;
border: 1px solid red;
transition: all 1s;/过渡时间/
}
up{
/向上状态/
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
opacity: 0;
}
down{
/向下状态/
-webkit-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
</style>
</head>
<body>
<button onclick="fadeInOut()">淡入淡出</button>
<div class="content">
<!--1-->
<div id="box1" class=""><img src=">分类: 电脑/网络 >> 软件 >> 其他软件
解析:
先在画布中导入一幅，右击—“动画”，选择“创建所选动画效果”，在d出的对话框中设置如下：
帧：20，移动：0，方向：0，缩放到：100%，不透明度：0到100（此为关键），旋转：0。在随后d出的对话框中选择“确定”按钮，添加新的帧。
按Shift +F2，调出帧面板，用鼠标选中第一帧。然后在画布中导入第二幅，并调整位置和第一幅重合，右击第二幅—“动画”，选择“创建所选动画效果”，在d出的对话框中设置如下：
帧：20，移动：0，方向：0，缩放到：100%，不透明度：100到0（这里的透明度和第一幅相反，是为了实现淡出淡入效果，即第一幅越来越淡的时候，第二幅图越来越明显），旋转：0。
点左下角的白色小箭头，即可预览。
如果还有什么不清楚，可以发cqgjfff@sina这个用jquery实现比较方便，用css的话比较难，如果只是一张图，你想让鼠标滑过淡入淡出，可以改变的透明度，css3中的rgba（255,255,255,1）三个255分别代表的rgb颜色三元素，后面的1就是它的透明的的值，从01~1之间，如果不懂或者想用jquery实现两张切换的，你可以再问我，我可以帮你做在ps中打开这两张，将其中一张作为要合并的基础，调整该大小，使其能放下两张，将另一张用鼠标拖至这张上，会新增一个图层，调整颜色及位置，使相同部分完全重合，调整好后，另存为文件即可
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）