前端页面--视觉差效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端页面--视觉差效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

代码

<!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;
    }
}