星空网 > 软件开发 > 网页设计

css3鼠标移动上移效果

css3的功能真是很强大,学无止境,不多说,直接上代码

css部分:

css3鼠标移动上移效果

<style>
*{margin: 0; padding: 0;}
.text-center{text-align:center}
.col_cont{width:300px;height:300px;margin:auto}
.thumbnail{cursor:pointer;text-decoration:none;display:block;padding:4px;height:200px;font-weight:bold;">#fff;border:1px solid #ddd; }
.thumbnail img, .thumbnail h3{transition:all .5s;-webkit-transition:all .5s;-ms-transition:all .5s;}
.thumbnail img{width:35%;margin-top:30px}
.thumbnail h3{color:silver}
.thumbnail:hover img{-webkit-transform:translateY(-20px);-moz-transform:translateY(-20px);-ms-transform:translateY(-20px);
-o-transform:translateY(-20px);transform:translateY(-20px)}
.thumbnail:hover h3{color:#2c3e50}
</style>
html部分:

css3鼠标移动上移效果

<div >
  <a >
<img src='/images/loading.gif' data-original="images/service-1.png" >
<div >
<h3>产品介绍产品介绍</h3>
</div>
</a>
</div>



原标题:css3鼠标移动上移效果

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流