纯css实现指向图片放大

1、html结构

<ul>
  <li><a  href=""><img scr="/images/1.jpg"></a></li>
  <li><a  href=""><img scr="/images/2.jpg"></a></li>
  <li><a  href=""><img scr="/images/3.jpg"></a></li>
  <li><a> href=""<img scr="/images/4.jpg"></a></li>

2、Css

img{
      display: block;  
      width:100%;   
      transform: scale(1);  
      transition: all 1s ease 0s;  
      -webkit-transform: scale(1);  
      -webkit-transform: all 1s ease 0s; 
      -webkit-transform-origin:50% 50%; 
      transform-origin:50% 50%;
      overflow:hidden;
     }
a:hover img{
	transform: scale(1.3);  
        transition: all 1s ease 0s;  
        -webkit-transform: all 1s ease 0s;  
        -webkit-transform: scale(1.3); /*放大1.3倍*/
	transition-duration: .5s;
	overflow:hidden;
	}

发布日期:

所属分类: Css/Html5 标签:  


下一篇:

没有了,已经是最新文章