照片手风琴悬浮显示效果-html代码-BFW代码库

照片手风琴悬浮显示效果

代码语言：html

所属分类：选项卡

代码描述：照片手风琴悬浮显示效果

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {

  width: 800px;
  height: 400px;
}

.items-row {
  display: -webkit-flex;
  display:     -ms-flexbox;
  display:         flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  width: 100%;
  height: 100%;
}
.item {
  margin: 2px;
  border: 1px solid #dddddd;
  -moz-box-sizing: border-box;
       box-sizing: border-box;

  -webkit-flex: 1 1 20%;
      -ms-flex: 1 1 20%;
          flex: 1 1 20%;
  transition: flex 0.4s ease;
}
.item:hover {
  -webkit-flex: 0.000000001 0.00000001 400px;
      -ms-flex: 0.000000001 0.00000001 400px;
          flex: 0.000000001 0.00000001 400px;
  background-size: 100% 100%
}

.img1 {
  background-image: url('http://repo.bfw.wiki/bfwrepo/image/5d653b1fc8bc9.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90');
  background-repeat: no-repeat;
}
.img2 {
  background-image: url('http://repo.bfw.wiki/bfwrepo/image/5d653bd0990d0.png?x-oss-process.........完整代码请登录后点击上方下载按钮下载查看