<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .door { width: 460px; height: 300px; margin: 150px auto; position: relative; perspective: 1000px; } .door img { width: 460px; } .door-l, .door-r { width: 50%; height: 100%; /*background-color: pink;*/ background: url("images/bg.png"); position: absolute; top: 0; box-sizing: border-box; transition: all 0.6s; } .door-l { left: 0; border-right: 1px solid red; transform-origin: left center; } .door-r { right: 0; border-left: 1px solid red; transform-origin: right center; } .door-r::before, .door-l::before { content: ""; display: block; width: 20px; height: 20px; border: 1px solid black; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); } .door-r::before { left: 10px; } .door-l::before { right: 10px; } .door:hover .door-l { transform: rotateY(-130deg); } .door:hover .door-r { transform: rotateY(130deg); } </style> </head> <body> <div class="door"> <img src="images/6.jpg"> <div class="door-l"></div> <div class="door-r"></div> </div> </body> </html>
运行结果：
