如何制作：鼠标滑过GIF图片表面，鼠标地下荡开水波或是随着鼠标动作，飘动一连串花瓣……
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何制作：鼠标滑过GIF图片表面，鼠标地下荡开水波或是随着鼠标动作，飘动一连串花瓣……相关的知识，希望对你有一定的参考价值。
这之类的动画制作，用什么软件做？PS CS2和IR能不能做，还是要用到FLASH？另外，在GIF图片上能不能添加超链接，鼠标点击后出现链接的那个网页？要怎么做？
两个问题都请说明用什么软件，怎么做~可以加分！
得用 FLASH 做 参考技术B 昂,flash的按钮控件+AS脚本.
如何用css3实现当我鼠标滑过导航时图片会缓慢的显现出来？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>xiao mi</title>
<style type="text/css">
*margin:0px;pading:0px;
ullist-style:none;
.nav
width:100%;
height:55px;
background:#401444;
.navul
width:980px;
color:white;
margin:0 auto;
.navul li
float:left;
line-height:55px;
padding:0 25px;
position:relative;
.navul li:hover
background:#333;
/*overflow:visible;*/
.n_navul
width:980px;
background:#fff;
position:absolute;
overflow:hidden;
.n_navul imgmargin-top:20px;margin-left:20px;float:left;
.textcolor:#e19;font-size:16px;float:left;font-weight:bold;padding-top:40px;
.text spandisplay:block;
.traborder-width:8px;border-style:solid;border-color:transparent transparent red;z-index:999;position:absolute;
left:0;bottom:0;
</style>
</head>
<body>
<div class="nav">
<ul class="navul">
<li><a>首页</a>
<p class="tra"></p>
<div class="n_navul">
<img src="img/navi_1.jpg"/>
<p class="text">
<span>小米手机你值得拥有！</span>
<span>大屏旗舰，HiFi 双卡双待！</span>
</p>
</div>
</li>
<li><a>小米手机</a></li>
<li><a>红米</a></li>
<li><a>平板</a></li>
<li><a>小米电视</a></li>
<li><a>小米路由</a></li>
</ul>
</div>
</body>
</html>
我要实现的效果是当鼠标移到<li>时图片会慢慢显示出来，昨天听课时忘记了关键的一步现在怎样想也实现不了。。。我就是无法理解如何实现给 <div class="n_navul">一个height让图片显示出来？因为刚开始时li事overflow：hidden；那将height：200px给谁可以让图片显出来？各位大侠有什么方法可以实现不用js就仅用css3.
上面是资料图
是效果图
<img src="http://www.baidu.com/img/bdlogo.png" />
css部分:
img
opacity: 0.6;/*可以改变数值*/
transition: opacity 1s ease-in-out;/*可以改变时间*/
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
img:hover
opacity: 1.0;/*可以改变数值*/
transition: opacity .55s ease-in-out;/*可以改变时间*/
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
这是只有css3 可能一些浏览器不支持所以楼主要注意
我一般喜欢用jquery毕竟方便嘛
希望能帮到你
刚刚又看了一遍楼主的代码貌似你要的可能是css3 animation这样的？
这里是官网
http://www.w3schools.com/css/css3_animations.asp
这里是transitions的documentation
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions 参考技术A 发一下你的图片好吗？
我试了，你这种方式是无法实现，你确定老师是这样的结构吗，如果LI设置了overflow: hidden;
那么LI的宽度是一定的，即使改变了高度，他超出宽度的部分还是无法显示的。
你可以看一下，我给发的，我变宽的LI 的宽度。。但是超出的部分由于设置了overflow: hidden;还是无法显示的。
css部分：
<style type="text/css">
*
margin: 0px;
pading: 0px;
ul
list-style: none;
.nav
width: 100%;
height: 55px;
background: #401444;
.navul
width: 980px;
color: white;
margin: 0 auto;
.navul li
width:100px;
height: 55px;
float: left;
line-height: 55px;
padding: 0 25px;
overflow:hidden;
position: relative;
transition: height 1s;
.navul li:hover
background: #333;
height: 300px;/*overflow:visible;*/
.n_navul
width: 980px;
/*background: #fff;*/
position: absolute;
overflow: hidden;
.n_navul img
margin-top: 20px;
margin-left: 20px;
float: left;
.text
color: #e19;
font-size: 16px;
float: left;
font-weight: bold;
padding-top: 40px;
.text span
display: block;
.tra
border-width: 8px;
border-style: solid;
border-color: transparent transparent red;
z-index: 999;
position: absolute;
left: 0;
bottom: 0;
以上是关于如何制作：鼠标滑过GIF图片表面，鼠标地下荡开水波或是随着鼠标动作，飘动一连串花瓣……的主要内容，如果未能解决你的问题，请参考以下文章