html - 使用 CSS 制作动画图片库的最佳实践

标签 html css

我正在尝试做一个照片库。我有这段代码:

<head>
<style>
.thumb {
    max-height: 171px;
    border: solid 6px rgba(5, 5, 5, 0.8);
}

.box {
    position: fixed;
    z-index: 999;
    height: 0;
    width: 0;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    opacity: 0;
}

.box img {
    max-width: 90%;
    max-height: 80%;
    margin-top: 2%;
}

.box:target {
    outline: none;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.box:target img {
    border: solid 17px rgba(77, 77, 77, 0.8);
}

.light-btn {
    color: #fafafa;
    background-color: #333;
    border: solid 3px #777;
    padding: 5px 15px;
    border-radius: 1px;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    position: absolute;
    top: 45%;
    z-index: 99;
}

.light-btn:hover {
    background-color: #111;
}

.btn-close {
    position: absolute;
    right: 2%;
    top: 2%;
    color: #fafafa;
    background-color: #92001d;
    padding: 10px 15px;
    border-radius: 1px;
    text-decoration: none;
}

.btn-close:hover {
    background-color: #740404;
}
</style>
</head>
<body>
<a href="#img1"><img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"></a>
<a href="#img2"><img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80"></a>
<a href="#img3"><img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80"></a>

<div class="box" id="img1">
<a href="#img3" class="light-btn btn-prev">prev</a>
<a href="#_" class="btn-close">X</a>
<img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
<a href="#img2" class="light-btn btn-next">next</a>
</div>

<div class="box" id="img2">
<a href="#img1" class="light-btn btn-prev">prev</a>
<a href="#_" class="btn-close">X</a>
<img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
<a href="#img3" class="light-btn btn-next">next</a>
</div>

<div class="box" id="img3">
<a href="#img2" class="light-btn btn-prev">prev</a>
<a href="#_" class="btn-close">X</a>
<img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
<a href="#img1" class="light-btn btn-next">next</a>
</div>
</body>

但是我想添加动画。当我点击“下一步”时，我希望照片从左侧出现，当我点击“上一个”时，照片从右侧出现，就像一个 slider 。 有可能用CSS来实现吗？例如使用 transform 属性？如果不是，我应该使用什么脚本？

最佳答案

你可以用单选按钮做这样的事情。如果您想要进行的每个转换在顶部都有一个单选按钮，您可以使用 CSS 选择每个单选按钮并根据需要添加 CSS 转换。使用 <label> s 而不是 <a> s 检查单选按钮，然后使实际的单选按钮不可见。但这需要大量代码，而且扩展性不是很好。因此，如果您计划拥有更多图片，则必须为每张图片分别添加 CSS，这可能需要大量工作。

这是一个简单的例子，将图像放入一个卷轴中，然后将整个东西左右滑动。它可能不完全是你想要的，但它的代码要少得多。这至少是一个好的起点。

<head>
  <style>
    .thumb {
      max-height: 171px;
      border: solid 6px rgba(5, 5, 5, 0.8);
    }

    .reel-wrapper {
      position: fixed;
      z-index: 999;
      height: 0;
      width: 0;
      text-align: center;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.8);
      opacity: 0;
      overflow: hidden;
    }
    
    .reel {
      position: absolute;
      width: auto;
      height: auto;
      display: flex;
      transition: left 1s ease-in-out;
    }
    
    #radio-close:not(:checked) ~ .reel-wrapper {
      outline: none;
      width: 100%;
      height: 100%;
      opacity: 1;
    }
    
    .box {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

    .box img {
      max-width: 90%;
      max-height: 80%;
      margin-top: 2%;
      border: solid 17px rgba(77, 77, 77, 0.8);
    }

    input[type="radio"] {
      display: none;
    }
    
    #radio-img1:checked ~ .reel-wrapper .reel {
      left: 0;
    }
    #radio-img2:checked ~ .reel-wrapper .reel {
      left: -100vw;
    }
    #radio-img3:checked ~ .reel-wrapper .reel {
      left: -200vw;
    }
    

    .light-btn {
      color: #fafafa;
      background-color: #333;
      border: solid 3px #777;
      padding: 5px 15px;
      border-radius: 1px;
      text-decoration: none;
      cursor: pointer;
      vertical-align: middle;
      position: absolute;
      top: 45vh;
      z-index: 99;
    }

    .light-btn:hover {
      background-color: #111;
    }

    .btn-close {
      position: absolute;
      right: 2%;
      top: 2%;
      color: #fafafa;
      background-color: #92001d;
      padding: 10px 15px;
      border-radius: 1px;
      text-decoration: none;
    }

    .btn-close:hover {
      background-color: #740404;
    }
    
    .btn-prev {
      left: 5vw;
    }
    
    .btn-next {
      right: 5vw;
    }

  </style>
</head>

<body>
  <input id="radio-close" type="radio" name="gallery-nav" checked>
  <input id="radio-img1"  type="radio" name="gallery-nav">
  <input id="radio-img2"  type="radio" name="gallery-nav">
  <input id="radio-img3"  type="radio" name="gallery-nav">
  
  <label for="radio-img1"><img class="thumb" src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80"></label>
  <label for="radio-img2"><img class="thumb" src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80"></label>
  <label for="radio-img3"><img class="thumb" src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80"></label>

  <div class="reel-wrapper">
    <div class="reel">

      <div class="box" id="img1">
        <label for="radio-img3" class="light-btn btn-prev">prev</label>
        <label for="radio-close" class="btn-close">X</label>
        <img src="https://images.unsplash.com/photo-1556742521-9713bf272865?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">
        <label for="radio-img2" class="light-btn btn-next">next</label>
      </div>

      <div class="box" id="img2">
        <label for="radio-img1" class="light-btn btn-prev">prev</label>
        <label for="radio-close" class="btn-close">X</label>
        <img src="https://images.unsplash.com/photo-1562657548-fcab42b43035?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=332&q=80">
        <label for="radio-img3" class="light-btn btn-next">next</label>
      </div>

      <div class="box" id="img3">
        <label for="radio-img2" class="light-btn btn-prev">prev</label>
        <label for="radio-close" class="btn-close">X</label>
        <img src="https://images.unsplash.com/photo-1564249332652-bf435bb2d21f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=353&q=80">
        <label for="radio-img1" class="light-btn btn-next">next</label>
      </div>

    </div>
  </div>
</body>

通常这种事情用 JavaScript 做起来会更容易。您可以只跟踪您正在查看的图像，然后单击按钮切换正确的类以使 CSS 执行实际动画。管理规模要容易得多。但纯 CSS 解决方案总是更有趣。

关于html - 使用 CSS 制作动画图片库的最佳实践，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57236746/

上一篇：css - base url em slded css data-lazyload

下一篇：javascript - 通过在移动设备上最大化 plyr.io 来强制横向模式？

相关文章：

jquery - 如何显示部分标题并在悬停时向上滑动整个标题

javascript - css3 动画文字居中对齐

javascript - 谷歌地图是灰色的

html - HTML 上传表单中的文件类型

javascript - 使用 HTML5 打开我的 iOS 应用程序并将参数传递给它

css - 动态加载列表时封装嵌套列表

javascript - 单击单选选项时显示文本框

html - Internet Explorer 的 Flexbox 布局问题

css - 查找占据所有宽度但仅占页面高度 25% 的图像

javascript - 将 css 边框淡化为不可见？

©2024 IT工具网  联系我们