欢迎加入站点基地设计开发交流群:30720409
详细内容
鼠标悬停图片稍微放大效果,网站常用
发布日期:2017-01-23     点击:1479     字体:[ ]

经常见到网站上,鼠标放到一个图片上,图片会稍微变大一点,鼠标移出,图片恢复正常,其实就是应用了样式transform,看下面代码,这里主要注意两个样式,一个是

.newsDL dd:hover .img .bot 动态变化条
.newsDL dd:hover .img img  图片动态放大缩小

其中图片放大缩小时间有 .newsDL dd .img img 这句样式定义

 

 

<dl class="newsDL newsDL2 clearfix">
<dd>
<a href="info.aspx?ContentID=1302&amp;t=19">
<div class="img"><span class="bot"></span>
<img src="Uploadfiles/Picture/2017-1-22/20171221659384621_350-234.jpg" alt="杨铿代表参加省两会,提案产业扶贫+教育扶贫践行精准扶贫战略"></div>
<div class="t" title="">杨铿代表参加省两会,提案产业扶贫+教育...</div>
<span class="time">   </a>
</dd>
</dl>

 

 

 

.newsDL dd { float: left; display: block; width: 31%; margin: 0px 3.5% 2% 0px; }
.newsDL dd.item3 { margin-right: 0px; }
.newsDL dd .img { width: 100%; overflow: hidden; margin-bottom: 35px; position: relative; background-color: #000; }
.newsDL dd .img .bot {background-color: #5899DD;height: 5px;overflow: hidden;position: absolute;left: 0px;top: 0px;width: 0350px;z-index: 3;transition: 2000ms;}
.newsDL dd .img img {width: 100%;display: block;transition:900ms;opacity: 1;}
.newsDL dd .t { font-size: 18px; height: 32px; overflow: hidden; transition: 400ms; }
.newsDL dd .time { font-family: Arial; }
.newsDL dd .time .source { font-family: 'Microsoft JhengHei'; }
.newsDL dd:hover .img .bot { width: 100%; }
.newsDL dd:hover .t { text-decoration: underline; }
.newsDL dd:hover .img img { opacity: 0.8; -webkit-transform: scale(1.14); transform: scale(1.2); }

用户评论
昵称 
内容  *
验证码   
   
Copyright © 2010 zdbase.com All Rights Reserved. 苏ICP备15039389号 可人软件设计