<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.5s; width: 1280px; height: 500px; background-image: url("img/03.jpg"); overflow: hidden; } /*使用css创建html before向左 after向右 是行内*/ #container::before, #container::after { float: left; content: ""; width: 50%; height: 500px; background-image: url("img/01.jpg"); background-size: cover; transition: all 0.5s; } #container::after { content: ""; background-position: right 0; } #container:hover::before { transform: translateX(-100%); } #container:hover::after { transform: translateX(100%); } </style> </head> <body> <div id="container"> </div> </body> </html>
双开门案例
最新推荐文章于 2024-09-29 21:43:16 发布
本文介绍如何使用CSS3实现响应式布局,通过`position`属性结合伪元素`::before`和`::after`,展示动态内容切换效果。通过过渡效果,鼠标悬停时左右平移图片,适合前端开发者学习基础动画技巧。
摘要由CSDN通过智能技术生成