首页 前端知识 CSS-上下滑动翻页效果

CSS-上下滑动翻页效果

2024-09-30 23:09:15 前端知识 前端哥 748 583 我要收藏

效果展示
在这里插入图片描述
代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- <link rel="stylesheet" href="/style.css" /> -->
    <title>Document</title>
  </head>
  <body>
    <div class="hero">
      <h1>人物介绍</h1>
      <div class="review-box">
        <div id="slide">
          <div class="card">
            <div class="profile">
              <img src="/image/pic1.jpg" />
              <div>
                <h3>Phoenix</h3>
                <p>Web Designer</p>
              </div>
            </div>
            <p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            </p>
          </div>
          <div class="card">
            <div class="profile">
              <img src="image/pic2.jpg" />
              <div>
                <h3>Steve McCurry</h3>
                <p>UI/UX Designer</p>
              </div>
            </div>
            <h3>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            </h3>
          </div>
          <div class="card">
            <div class="profile">
              <img src="image/pic3.jpg" />
              <div>
                <h3>Merlin Nauven</h3>
                <p>Web Designer</p>
              </div>
            </div>
            <p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            </p>
          </div>
          <div class="card">
            <div class="profile">
              <img src="image/pic4.jpg" />
              <div>
                <h3>John Williams</h3>
                <p>Web Designer</p>
              </div>
            </div>
            <p>
              The designer sat at their desk, surrounded by sketches and color
              swatches. They carefully crafted each line and curve, choosing
              just the right hue to bring their vision to life. With a steady
              hand and a sharp eye, they transformed blank pages into beautiful
              works of art.
            </p>
          </div>
        </div>
        <div class="sidebar">
          <!-- <img src="/image/up-arrow.png" id="upArrow" /> -->
          <div id="upArrow"></div>
          <div id="downArrow"></div>
        </div>
          
          <!-- <img src="/image/down-arrow.png" id="downArrow" /> -->
        </div>
      </div>
    </div>
    <script>
      var slide = document.getElementById('slide')
      var upArrow = document.getElementById('upArrow')
      var downArrow = document.getElementById('downArrow')

      let x = 0

      upArrow.onclick = function () {
        if (x < 0) {
          x = x + 300
          slide.style.top = x + 'px'
        }
      }
      downArrow.onclick = function () {
        if (x > -900) {
          x = x - 300
          slide.style.top = x + 'px'
        }
      }
    </script>
  </body>
</html>
<style>
  * {
    padding: 0;
    margin: 0;
    font-family: sans-serif;
  }

  .hero {
    width: 100%;
    height: 100vh;
    background: #f6fbff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  h1 {
    font-size: 30px;
    position: relative;
    margin-bottom: 60px;
  }

  h1::after {
    content: '';
    width: 150px;
    height: 3px;
    background: linear-gradient(to right, #0780ed, #9f4db5);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
  }

  .review-box {
    width: 90%;
    max-width: 700px;
    height: 300px;
    border-radius: 10px;
    box-shadow: -10px 10px 40px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
  }
  #upArrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
  #downArrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
  }
  .card {
    height: 300px;
    padding: 40px;
    color: #111;
    line-height: 22px;
    box-sizing: border-box;
    background: #fff;
    position: relative;
  }

  .profile {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
  }

  .profile img {
    width: 70px;
    border-radius: 50%;
    margin-right: 20px;
  }

  .profile h3 {
    font-size: 26px;
    color: #0780ed;
    margin-bottom: 8px;
  }

  #slide {
    width: 100%;
    padding-right: 60px;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
  }

  .sidebar {
    width: 60px;
    height: 100%;
    padding: 15px 0;
    box-sizing: border-box;
    background: #0780ed;
    position: absolute;
    right: 0;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .sidebar img {
    width: 25px;
    padding: 5px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
  }
</style>

Tips:觉得有用的话点个关注呦,会分享更多“有用”的前端tips

转载请注明出处或者链接地址:https://www.qianduange.cn//article/18823.html
标签
评论
发布的文章

JSON:API Normalizer 项目教程

2024-10-30 21:10:43

json2html 项目教程

2024-10-30 21:10:41

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!