css3实现小米商城鼠标移动图片上浮阴影效果

最新推荐文章于 2022-09-18 12:47:49 发布

weixin_30588827

最新推荐文章于 2022-09-18 12:47:49 发布

阅读量1.4k

点赞数

原文链接：http://www.cnblogs.com/future-zmy/p/6055808.html

版权

今天在编程爱好者编码库看见一个好玩的程序，代码如下。
 
  <!DOCTYPE html> 
 
  <html> 
 
  <head> 
 
  <meta charset= 
  "UTF-8" 
  > 
 
  <meta name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1, user-scalable=no" 
  > 
 
  <meta http-equiv= 
  "X-UA-Compatible" 
  content= 
  "IE=edge,chrome=1" 
  > 
 
  <meta name= 
  "renderer" 
  content= 
  "webkit" 
  > 
 
  <title>CSS 
  3 
  实现小米商城鼠标移动图片上浮阴影效果</title> 
 
  <style> 
 
  *{ 
  margin 
  :  
  0 
  ; 
  padding 
  :  
  0 
  ; 
  font-family 
  :  
  '微软雅黑' 
  , 
  'Helvetica Neue' 
  ,  
  Arial 
  ,  
  sans-serif 
  } 
 
  body{ 
 
  background-color 
  :  
  #f5f5f5 
  ; 
 
  text-align 
  :  
  center 
  ; 
 
  } 
 
  .image-shadow{ 
 
  position 
  : 
  relative 
  ;   
  /*设置为相对*/ 
 
  margin 
  :  
  60px 
  auto 
  ; 
 
  z-index 
  :  
  1 
  ; 
 
  width 
  :  
  294px 
  ; 
 
  height 
  :  
  413px 
  ; 
 
  background 
  :  
  #fff 
  ; 
 
  -webkit-transition:  
  all 
  . 
  2 
  s linear;  
  /*渐变效果*/ 
 
  transition:  
  all 
  . 
  2 
  s linear; 
 
  } 
 
  .image-shadow:hover{ 
 
  z-index 
  :  
  2 
  ;  
  /*设置在顶层显示*/ 
 
  -webkit-box-shadow:  
  0 
  15px 
  30px 
  rgba( 
  0 
  , 
  0 
  , 
  0 
  , 
  0.1 
  );     
  /*添加阴影*/ 
 
  box-shadow:  
  0 
  15px 
  30px 
  rgba( 
  0 
  , 
  0 
  , 
  0 
  , 
  0.1 
  ); 
 
  -webkit-transform: translate 
  3 
  d( 
  0 
  ,  
  -2px 
  ,  
  0 
  );      
  /*向上浮动*/ 
 
  transform: translate 
  3 
  d( 
  0 
  ,  
  -2px 
  ,  
  0 
  ); 
 
  } 
 
  </style> 
 
  </head> 
 
  <body> 
 
  <h 
  3 
  style= 
  "margin: 60px 0 20px 0; text-align: center" 
  >CSS 
  3 
  实现小米商城鼠标移动图片上浮阴影效果</h 
  3 
  > 
 
  <div class= 
  "image-shadow" 
  > 
 
  <img src= 
  "http://i1.piimg.com/1949/b5f249822d378888.png" 
  > 
 
  </div> 
 
  </body> 
 
  </html>