如何用css3实现当我鼠标滑过导航时图片会缓慢的显现出来？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用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;
CSS鼠标滑过内容切换的代码
最近网上盛行一种代码，如 http://www.163.com/ 等一些大网站都会用到的一种效果，简单点说就是鼠标一滑过内容就自动切换，这样很节省版面，内容也可以放的更多……但是本人对于这个代码不熟悉，希望得到高手的指点，本人将感激不尽！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML>
<HEAD>
<TITLE></TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
/*为什么要这样定义样式，而不用#cardBar ul 这样定义，我个人的猜测是因为类是就近原则获取样式，而#cardBar ul则不是就近原则，按标签来定义，因此.Selected样式就无法出现。*/
*
margin:0px;
padding:0px;
text-decoration:none;
/*定义基本样式*/
ul.cardUl
font-size:12px;
list-style-type:none;
text-align:center;
height:29px;
background-image:url(attachments/month_0706/2200764172315.gif);
/*默认样式下使用css文件*/
ul.cardUl li
height:29px;
background:url(attachments/month_0706/u200764172418.gif) left top no-repeat;
float:left;
margin-right:1px;
padding-left:6px; /*另一边提供空间*/
ul.cardUl li a
float:left;
height:29px;
background:url(attachments/month_0706/y200764172443.gif) right top no-repeat;
display:block;
padding:8px 8px 3px 4px;/*让文字能够够居中*/
color:#333;
white-space: nowrap;
/*文字点击使用CSS*/
ul.cardUl li.Selected
background:url(attachments/month_0706/g20076417255.gif) left top no-repeat;
ul.cardUl li.Selected a
background:url(attachments/month_0706/z200764172528.gif) right top no-repeat;
/*对点击下栏显示边框的代码进行美化*/
div.hackBox
padding:2px 2px;
border-left:2px solid #6697CD;
border-right:2px solid #6697CD;
border-bottom:2px solid #6697CD;
display:none;
</style>
<script>
//为选项卡的默认值进行设定，方法为读取cardBar里面的li标签是否已经有selected属性，如果没有则使用默认值。
function loadTab()
//读取cardBar下面所有li标签
var getId=document.getElementById("cardBar").getElementsByTagName("li");
//定义一个判断是否有selected的变量
var selectedItems=0;
//判断方法，循环读出li标签的className，如果有则selectedItems加1
for(i=0;i<getId.length;i++)
if (getId[i].className == "Selected")
selectedItems+=1;
//经过循环，如果selectedItems没有数值，那么说明没有selected的标签，因此给标签加上默认的className
if (selectedItems==0)
document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
document.getElementById("Dcard1").style.display="block";
//让窗口打开就运行他
window.onload=loadTab;
//设定结束
//进行选项卡效果的触发
function switchTab(cardBar,cardId)
//读取cardBar下面所有li标签
var oItems = document.getElementById(cardBar).getElementsByTagName("li");
//循环清空li标签下面的selected效果
for (i=0;i<oItems.length;i++ )
var x=oItems[i];
x.className="";
var y=x.getElementsByTagName("a");
y[0].style.color="#333";
//开始选项卡效果的赋值，为选中的li标签增加selected类的属性
document.getElementById(cardId).className="Selected";
//读出cardContent 下面的所有div标签
var dvs=document.getElementById("cardContent").getElementsByTagName("div");
//循环，判断应该显示的div
for (i=0;i<dvs.length;i++ )
if (dvs[i].id==("D"+cardId))
dvs[i].style.display="block";
else
dvs[i].style.display="none";
</script>
<BODY>
<div id="aa">
<ul class="cardUl" id="cardBar">
<li id="card1"><a href="#" onclick="javascript:switchTab('cardBar','card1');">第一选项</a></li>
<li id="card2"><a href="#" onclick="javascript:switchTab('cardBar','card2');">第二选项</a></li>
<li id="card3"><a href="#" onclick="javascript:switchTab('cardBar','card3');">第三选项</a></li>
<li id="card4"><a href="#" onclick="javascript:switchTab('cardBar','card4');">第四选项</a></li>
</ul>
<div id="cardContent">
<div id="Dcard1" class="hackBox">代码一</div>
<div id="Dcard2" class="hackBox"">代码二</div>
<div id="Dcard3" class="hackBox">代码三</div>
<div id="Dcard4" class="hackBox">代码四</div>
</div>
</div>
</BODY>
</HTML> 参考技术A <TITLE></TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<style>
/*为什么要这样定义样式，而不用#cardBar ul 这样定义，我个人的猜测是因为类是就近原则获取样式，而#cardBar ul则不是就近原则，按标签来定义，因此.Selected样式就无法出现。*/
*
margin:0px;
padding:0px;
text-decoration:none;
/*定义基本样式*/
ul.cardUl
font-size:12px;
list-style-type:none;
text-align:center;
height:29px;
background-image:url(attachments/month_0706/2200764172315.gif);
/*默认样式下使用css文件*/
ul.cardUl li
height:29px;
background:url(attachments/month_0706/u200764172418.gif) left top no-repeat;
float:left;
margin-right:1px;
padding-left:6px; /*另一边提供空间*/
ul.cardUl li a
float:left;
height:29px;
background:url(attachments/month_0706/y200764172443.gif) right top no-repeat;
display:block;
padding:8px 8px 3px 4px;/*让文字能够够居中*/
color:#333;
white-space: nowrap;
/*文字点击使用CSS*/
ul.cardUl li.Selected
background:url(attachments/month_0706/g20076417255.gif) left top no-repeat;
ul.cardUl li.Selected a
background:url(attachments/month_0706/z200764172528.gif) right top no-repeat;
/*对点击下栏显示边框的代码进行美化*/
div.hackBox
padding:2px 2px;
border-left:2px solid #6697CD;
border-right:2px solid #6697CD;
border-bottom:2px solid #6697CD;
display:none;
</style>
<script>
//为选项卡的默认值进行设定，方法为读取cardBar里面的li标签是否已经有selected属性，如果没有则使用默认值。
function loadTab()
//读取cardBar下面所有li标签
var getId=document.getElementById("cardBar").getElementsByTagName("li");
//定义一个判断是否有selected的变量
var selectedItems=0;
//判断方法，循环读出li标签的className，如果有则selectedItems加1
for(i=0;i<getId.length;i++)
if (getId[i].className == "Selected")
selectedItems+=1;
//经过循环，如果selectedItems没有数值，那么说明没有selected的标签，因此给标签加上默认的className
if (selectedItems==0)
document.getElementById("cardBar").getElementsByTagName("li")[0].className="Selected";
document.getElementById("Dcard1").style.display="block";
//让窗口打开就运行他
window.onload=loadTab;
//设定结束
//进行选项卡效果的触发
function switchTab(cardBar,cardId)
//读取cardBar下面所有li标签
var oItems = document.getElementById(cardBar).getElementsByTagName("li");
//循环清空li标签下面的selected效果
for (i=0;i<oItems.length;i++ )
var x=oItems[i];
x.className="";
var y=x.getElementsByTagName("a");
y[0].style.color="#333";
//开始选项卡效果的赋值，为选中的li标签增加selected类的属性
document.getElementById(cardId).className="Selected";
//读出cardContent 下面的所有div标签
var dvs=document.getElementById("cardContent").getElementsByTagName("div");
//循环，判断应该显示的div
for (i=0;i<dvs.length;i++ )
if (dvs[i].id==("D"+cardId))
dvs[i].style.display="block";
else
dvs[i].style.display="none";
</script>
<BODY>
<div id="aa">
<ul class="cardUl" id="cardBar">
<li id="card1"><a href="#" onclick="javascript:switchTab('cardBar','card1');">第一选项</a></li>
<li id="card2"><a href="#" onclick="javascript:switchTab('cardBar','card2');">第二选项</a></li>
<li id="card3"><a href="#" onclick="javascript:switchTab('cardBar','card3');">第三选项</a></li>
<li id="card4"><a href="#" onclick="javascript:switchTab('cardBar','card4');">第四选项</a></li>
</ul>
<div id="cardContent">
<div id="Dcard1" class="hackBox">代码一</div>
<div id="Dcard2" class="hackBox"">代码二</div>
<div id="Dcard3" class="hackBox">代码三</div>
<div id="Dcard4" class="hackBox">代码四</div>
</div>
</div>
</BODY>
</HTML>
以上是关于如何用css3实现当我鼠标滑过导航时图片会缓慢的显现出来？的主要内容，如果未能解决你的问题，请参考以下文章
请问鼠标滑过背景图片，图片围绕圆心旋转的效果怎么实现？css3也可以..