前端页面--视觉差效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" /><link rel="stylesheet" href="style.css"><title>油画展览</title>
</head>
<body><header class="main-header"><h1>油画展览</h1><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et, est?</p></header><main class="container"><section class="card" ><img src="img/paint-1.jpg" alt=""><div><h3>Painting One</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="fade-left"><img src="img/paint-2.jpg" alt=""><div><h3>Painting Two</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="flip-right"><img src="img/paint-3.jpg" alt=""><div><h3>Painting Three</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="slide-left"><img src="img/paint-4.jpg" alt=""><div><h3>Painting Four</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="zoom-in-right"><img src="img/paint-5.jpg" alt=""><div><h3>Painting Five</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section><section class="card" data-aos="fade-left"><img src="img/paint-6.jpg" alt=""><div><h3>Painting Six</h3><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ducimus, repellat corrupti. Nesciunt illum quam sed, minima ratione consequatur perspiciatis debitis, omnis vero ut veniam voluptatem quasi sit, nulla corrupti laboriosam?</p><a href="#" class="btn">了解更多</a></div></section></main><script src="https://unpkg.com/aos@next/dist/aos.js"></script><script>AOS.init({offset:400,delay:0,duration:1000});</script>
</body>
</html>

*{margin: 0;padding: 0;box-sizing: border-box;
}body{font-size: 1.3rem;font-family: Arial, Helvetica, sans-serif;background-color: #f9f9f9;font-family: 'Oswald',sans-serif;
}a{color: #333;text-decoration: none;
}.main-header{height: 55vh;padding: 2rem;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;
}.main-header h1{font-size: 4rem;margin-bottom: 2rem;line-height: 1.2;color: #b50d10;
}.main-header p{font-size: 2rem;
}.container{max-width: 1100px;margin: auto;overflow: auto;padding: 0 2rem;
}img{width: 100%;
}.card{display: grid;grid-template-columns: repeat(2, 1fr);grid-gap:2rem;background-color: #f1f1f1;margin-bottom: 2rem;
}.card h3{margin-bottom: 2rem;
}.card img{height: 400px;
}.card>div{padding: 2rem;
}.card:nth-child(even) img{order:2;
}.btn{display: inline-block;background-color: #000;color:#fff;padding: 0.8rem 1.8rem;margin-top: 2rem;cursor: pointer;
}.btn:hover{opacity: 0.8;
}@media(max-width: 600px){.card{display: block;}
}