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>

  • 相关阅读:
    [转]vs2010 快捷键大全
    oracle 分组排序
    jqGrid如何实现单选。
    WCF 服务调用RFC 出现异常
    c语言修饰符总结const、static、volatile、auto、extern、register
    BL和LDR——位置无关码和位置相关码
    原码,反码,补码(二)
    原码补码反码
    C语言内存分布
    ARM总线架构(S3C2440)
  • 原文地址:https://www.cnblogs.com/good2008/p/7417206.html
Copyright © 2011-2022 走看看