zoukankan      html  css  js  c++  java
  • 鼠标指到图片上会向上移动

    css样式:

    .anlibox{ 1170px;position:relative; left:1.5%; top: 15%; margin:0 auto;}
    .anli1{270px;}
    .anli2{278px;}
    .anli3{322px;}
    .anli4{299px;}
    .anli1 img, .anli2 img, .anli3 img, .anli4 img{transition: transform 0.5s; -webkit-transition: -webkit-transform 0.5s; /* Safari */ }
    .anli1 img:hover, .anli2 img:hover, .anli3 img:hover, .anli4 img:hover{transform: translate(0px,-10px); -ms-transform: translate(0px,-10px); /* IE 9 */ -webkit-transform: translate(0px,-10px); /* Safari and Chrome */ }

    html代码:

    <ul class="oh pt10 pb50">
    <li class="fl anli1"> <a rel="nofollow" href="photo.html"><img src="images/sj1.jpg" alt=""></a> <a rel="nofollow" href="photo.html"><img src="images/sj5.jpg" alt=""></a></li>
    <li class="fl anli2"> <a rel="nofollow" href="photo.html"><img src="images/sj2.jpg" alt=""></a> <a rel="nofollow" href="photo.html"><img src="images/sj6.jpg" alt=""></a></li>
    <li class="fl anli3"> <a rel="nofollow" href="photo.html"><img src="images/sj3.jpg" alt=""></a> <a rel="nofollow" href="photo.html"><img src="images/sj7.jpg" alt=""></a></li>
    <li class="fl anli4"> <a rel="nofollow" href="photo.html"><img src="images/sj4.jpg" alt=""></a> <a rel="nofollow" href="photo.html"><img src="images/sj8.jpg" alt=""></a></li>
    </ul>

  • 相关阅读:
    关于域名系统DNS解析IP地址的一些总结
    一个完整的TCP连接
    针对github权限导致hexo部署失败的解决方案
    关于css的一些事情(1)
    MVC、MVVM、MVP小结
    关于移动端开发的一些总结
    json与jsonp小结
    BFC 小结
    ES6 - for...of
    ES6-Symbol
  • 原文地址:https://www.cnblogs.com/good2008/p/7417206.html
Copyright © 2011-2022 走看看