Today in the programming enthusiast code library see a fun program, the code is as follows.
<!DOCTYPE html> <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>CSS3实现小米商城鼠标移动图片上浮阴影效果</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: 60pxauto; z-index: 1; width: 294px; height: 413px; background: #fff; -webkit-transition: all.2s linear; /*渐变效果*/ transition: all.2s linear; } .image-shadow:hover{ z-index: 2; /*设置在顶层显示*/ -webkit-box-shadow: 015px30pxrgba(0,0,0,0.1); /*添加阴影*/ box-shadow: 015px30pxrgba(0,0,0,0.1); -webkit-transform: translate3d(0, -2px, 0); /*向上浮动*/ transform: translate3d(0, -2px, 0); } </style><body>3style="margin: 60px 0 20px 0; text-align: center">CSS3实现小米商城鼠标移动图片上浮阴影效果3><div class="image-shadow"> "http://i1.piimg.com/1949/b5f249822d378888.png"></div></body>CSS3 realizes the floating shadow effect of mouse moving picture in Mi Mall
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
