CSS using offset transform to achieve double door effect: using floating, graphics conversion, mouse hover knowledge point on the picture translation, to achieve two pictures of double door effect!

1. Define a box to store the images inside after opening the door

Code:

HTML:

<body>
    <div class="box"></div>
</body>
Copy the code

CSS:

.box { width: 1366px; height: 600px; */ background: url(./images/bg.jpg); margin: 50px auto; /* border: 5px solid pink; /* border: 5px solid pink; /* overflow: hidden; }Copy the code

Effect:

2. Add two doors

  • The pseudo-element method is added to the left and right sides of the image and is of the same size
  • Using float juxtaposition
  • Add a background image and position it

Code:

/ * pseudo element method * /. Box: : before, box: : after {content: "'; float: left; /* width: 50%; height: 100%; / / background: pink url(./images/fm.jpg) left; /* Transition: 1; }. Box ::after {/* Align the background image to the right */ background: URL (./images/fm.jpg) right; } /* hover */. Box :hover::before {/* left offset itself twice */ transform: translate(-100%); }. Box :hover::after {/* to the right of its own double */ transform: translate(100%); }Copy the code

hovering

  • Hover over box Box
  • The two doors moved to each side
  • The movement time is 1s

Code:

/* hover */. Box :hover::before {/* left offset itself twice */ transform: translate(-100%); }. Box :hover::after {/* to the right of its own double */ transform: translate(100%); }Copy the code

Effect:

After inserting the door:

Hover over box:

Note:

  • Overflow hiding needs to be set in large boxes overflow: hidden;
  • Set transition timetransition: 1s;
  • Center the page and add it in boxmargin: 50px auto;