HTML5技术

css3鼠标移动上移效果 - 杜Amy

字号+ 作者:H5之家 来源:H5之家 2016-08-19 13:00 我要评论( )

css3的功能真是很强大,学无止境,不多说,直接上代码 css部分: 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;paddi

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

css部分:

<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部分:

<div> <a>
<img src="images/service-1.png" alt="...">
<div>
<h3>产品介绍产品介绍</h3>
</div>
</a>
</div>

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • CSS3计数器的使用-遁地龙卷风 - 遁地龙卷风

    CSS3计数器的使用-遁地龙卷风 - 遁地龙卷风

    2016-08-19 12:00

  • 纯CSS3单页切换导航菜单界面设计 - 爱上程序猿

    纯CSS3单页切换导航菜单界面设计 - 爱上程序猿

    2016-08-19 11:00

  • CSS3 2D static - _this

    CSS3 2D static - _this

    2016-08-14 11:00

  • CSS3 时钟 - 前端爱好者

    CSS3 时钟 - 前端爱好者

    2016-08-14 10:01

网友点评
S