<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>综合案例--双开门</title><style>*{padding: 0;margin: 0;}/* 布局：父子结构，父级是大图，子级是左右的小图 */.father{display: flex;margin: 0 auto;width: 1366px;height: 600px;background-image: url(./bg.jpg);overflow: hidden;}.father .left,.father .right{transition: all 4s;width: 50%;height: 600px;background-image: url(./fm.jpg);}.father .right{/* right表示取到精灵图的右面的不部分 */background-position: right;}/* 鼠标悬停的效果：左右移动 */.father:hover .left{transform: translate(-100%);}.father:hover .right{transform: translate(100%);}</style>
</head>
<body><div class="father"><div class="left"></div><div class="right"></div></div>
</body>
</html>
