如何用CSS实现鼠标经过 图片放大的效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用CSS实现鼠标经过 图片放大的效果相关的知识，希望对你有一定的参考价值。
源码如下
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>CSS3鼠标滑过图片放大特效DEMO演示</title>
<style>
htmlfont-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%bodymargin:0article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summarydisplay:blockaudio,canvas,progress,videodisplay:inline-block;vertical-align:baselineaudio:not([controls])display:none;height:0[hidden],templatedisplay:noneabackground:transparenta:active,a:hoveroutline:0abbr[title]border-bottom:1px dottedb,strongfont-weight:bolddfnfont-style:italich1font-size:2em;margin:0.67em 0markbackground:#ff0;color:#000smallfont-size:80%sub,supfont-size:75%;line-height:0;position:relative;vertical-align:baselinesuptop:-0.5emsubbottom:-0.25emimgborder:0svg:not(:root)overflow:hiddenfiguremargin:1em 40pxhr-moz-box-sizing:content-box;box-sizing:content-box;height:0preoverflow:autocode,kbd,pre,sampfont-family:monospace, monospace;font-size:1embutton,input,optgroup,select,textareacolor:inherit;font:inherit;margin:0buttonoverflow:visiblebutton,selecttext-transform:nonebutton,html input[type="button"],input[type="reset"],input[type="submit"]-webkit-appearance:button;cursor:pointerbutton[disabled],html input[disabled]cursor:defaultbutton::-moz-focus-inner,input::-moz-focus-innerborder:0;padding:0inputline-height:normalinput[type="checkbox"],input[type="radio"]-moz-box-sizing:border-box;box-sizing:border-box;padding:0input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-buttonheight:autoinput[type="search"]-webkit-appearance:textfield;-moz-box-sizing:content-box;box-sizing:content-boxinput[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration-webkit-appearance:nonefieldsetborder:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75emlegendborder:0;padding:0textareaoverflow:autooptgroupfont-weight:boldtableborder-collapse:collapse;border-spacing:0td,thpadding:0
</style>
<style>
@import url("http://fonts.googleapis.com/css?family=Lato");
*
margin: 0;
padding: 0;
box-sizing: border-box;
body
font: 14px/1 Lato, sans-serif;
color: #555;
background: #eee;
.gallery
width: 790px;
margin: 30px auto;
padding: 5px;
background: #333;
.gallery > div
position: relative;
float: left;
padding: 5px;
.gallery > div > img
width: 250px;
transition: .1s transform;
transform: translateZ(0);
/* hack */
.gallery > div:hover
z-index: 1;
.gallery > div:hover > img
transform: scale(1.5, 1.5);
transition: .3s transform;
.cf:before, .cf:after
display: table;
content: "";
line-height: 0;
.cf:after
clear: both;
h1
margin: 40px 0;
font-size: 24px;
text-align: center;
text-transform: uppercase;
footer
margin: 80px 0;
text-align: center;
</style>
<script src="js/prefixfree.min.js"></script>
</head>
<body>
<div class="gallery cf">
<div>
<img src="landscape-test-1_1x.jpg" />
</div>
<div>
<img src="iceberg_1x.jpg" />
</div>
<div>
<img src="igloo-800_1x.jpg" />
</div>
<div>
<img src="trees_1x.jpg" />
</div>
<div>
<img src="space_1x.jpg" />
</div>
<div>
<img src="render1_1x.jpg" />
</div>
</div>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</body>
</html> 参考技术A
可以利用css以下几个特性：
1. :hover ，可以实现鼠标悬停在指定元素上时触发该伪类样式；
2.transition ，可以实现效果的过度。
详细用法请百度。
此外，也可以使用js dom等。
如何用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实现鼠标经过 图片放大的效果的主要内容，如果未能解决你的问题，请参考以下文章