html {
	height:100%;
}
body {
	/* 设置body高度与 html 高度相等，以便实现垂直居中 */
            height:100%;
	/* 开启弹性布局 */
            display:flex;
	/* 水平居中 */
            justify-content:center;
	/* 垂直居中 */
            align-items:center;
	/* 消除body自带边距,消除滚动条 */
            margin:0 auto;
}
div {
	/* 针对上级父元素body所开启的弹性布局,相对居中 */
        width:500px;
	height:500px;
	/* 设置相对定位,为子元素 section 提供定位 */
        position:relative;
	background:#ccc;
	transform:scale(0.7);
}
section {
	width:100px;
	height:100px;
	background:white;
	/* 设置绝对定位,针对父元素 div进行定位 */
        position:absolute;
	/* 设置渐变返回时间为0.5s */
        transition-duration:0.5s;
	/* 文本居中 */
        text-align:center;
	line-height:100px;
	/* 透明度为0.7 */
        opacity:0.7;
}
section:nth-child(1) {
	/* 左上对齐 */
       left:0;
	top:0;
	/* 盒子阴影效果 */
        /* box-shadow： 水平偏移方向  垂直偏移方向  阴影散发范围  阴影颜色 */
        box-shadow:-3px -3px 2px rgb(94,92,92);
}
section:nth-child(2) {
	/* 右上对齐 */
       /* right:0;
	*/
        /* 针对下面发生的鼠标经过，必须与其的 left值对应，所以在这里用right不行 */
       left:400px;
	top:0;
	box-shadow:3px -3px 2px rgb(94,92,92);
}
section:nth-child(3) {
	/* 左下对齐 */
       left:0;
	/* 针对下面发生的鼠标经过，必须与其的 top值对应，所以在这里用bottom不行 */
       /* bottom:0;
	*/
       top:400px;
	box-shadow:-3px 3px 2px rgb(94,92,92);
}
section:nth-child(4) {
	/* 右下对齐 */
       left:400px;
	/* bottom:0;
	*/
       top:400px;
	box-shadow:3px 3px 2px rgb(94,92,92);
}
section:nth-child(5) {
	/* 居中对齐 */
       left:200px;
	top:200px;
}
/* 鼠标经过 */
   /* 当鼠标经过 div 时 div内的 section 发生改变 */
   div:hover section {
	/* 设置渐变时间为2s */
      transition:2s;
	/* 居中 */
       /* left:500px/2 - 100px/2 =200px */
      left:200px;
	/* 此处针对上面的 top left */
      /* 若换成bottom right 不能实现该效果 */
      top:200px;
	background:yellow;
}
/* 当鼠标经过 div 时 div内的 第五个section 发生改变 */
     div:hover section:nth-child(5) {
	/* 渐变延迟 */
        transition-delay:2s;
	/* 变大 */
        transform:scale(1.5);
	/* 透明度为1，背景色为父元素背景色，实现遮盖效果 */
        background:#ccc;
	opacity:1;
}