关于我的不透明度滑块的建议（纯 CSS，无 JS）

Question

我为我想用于客户推荐的不透明度滑块创建了这支笔。我将 CSS 的推荐书基于另一支笔，如果有人愿意，我可以在这里 link 。我对编码很陌生，是一个极端的初学者，所以请原谅我的愚蠢错误。 :P 有没有人对如何改进此设计以及如何在我添加更多推荐（可能 6-8）后使其更加通用有任何建议。我对动画属性及其工作方式感到困惑，即延迟和动画持续时间。我只是一直玩弄这些数字，直到它奏效。我计划将此 "slider" 放在我网站的页脚中。让我烦恼的一件事是它没有居中。我怎样才能使滑块居中？另外，我应该如何处理 "slider" 的高度？我目前这样做的方式没有任何意义。有点像很多代码。

非常感谢您提供的任何建议，我非常感谢。 :)

这是我的 Codepen 的 link：[link] (http://codepen.io/ericshio/pen/grzboq)

HTML:

<div class="test-slider">
<div class="test-slide">
<figure class="test">
<img class="img-circle img-border" src="http://www.themainconcept.com/wp-content/uploads/2016/04/eric.png" width="40%"/>
<h2>Eric S.</h2>
<h4>Some Guy</h4>
<blockquote>Insert cheesy quote here! Lorem ipsum dolor sit amet, at lorem graecis ius, qui at veri vocent.</blockquote>

</figure>
</div>
<div class="test-slide">
    <figure class="test">
<img class="img-circle img-border" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
<h2>Daniel &amp; Lia</h2>
<h4>Couple</h4>
<blockquote>Words go here from what people have to say.</blockquote>
</div>
</div>

CSS:

.test-slider {
    width: 25em;
    height: 25em;
    margin: auto;
    overflow: hidden;
    position: relative;
}

.test-slide {
    position: absolute;
    animation: 30s slider infinite;
    -webkit-animation: 30s test-slider infinite;
    opacity: 0;
}

@keyframes test-slider {
    10% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

div.test-slide:nth-child(0) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

div.test-slide:nth-child(1) {
    animation-delay: 15s;
    -webkit-animation-delay: 15s;
}

figure.test {
    font-family: lato !important;
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10% 1%;
    min-width: 15em;
    max-width: 20em;
    width: 100%;
    color: #000000;
    text-align: center;
    font-size: 1em;
    background-color: #2d2d2d;
    padding: 8% 8% 8% 8%;
    background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
   -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
}

figure.test img {
    width: 50%;
    margin-top: 0;
    margin-bottom: 2%;
}

figure.test h2, figure.test h4 {
    font-family: lato;
    text-transform: none;
    margin: 0;
}

figure.test h2 {
    font-weight: bold;
    color: white;
}

figure.test h4 {
    font-weight: normal;
    color: #a6a6a6;
}

figure.test blockquote {
    margin-top: 5%;
    margin-bottom: 0;
    padding: 8%;
    opacity: 1;
    font-style: italic;
    font-size: 1em;
    background-color: white;
    border-radius: 0.3em 0.3em 0.3em 0.3em;
    box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
    text-align: left;
    position: relative;
}

.img-border {
    border: 0.5em solid tan;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}

.img-circle {
    margin: auto;
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
}

blockquote, blockquote:before, blockquote:after, blockquote::before, blockquote::after {
    margin: auto;
    border: none;
    position: initial;
    content: " ";
    quotes: "1C""1D""18""19";
}

blockquote {
}

blockquote:before {
    content: open-quote;
}

blockquote::before, blockquote::after {
    display: inline;
}

blockquote:after {
    content: close-quote;
}

JS:

NONE >:)

Answer 1

比仅仅为您提供解决方案更重要的是帮助您真正看到您的元素实际上居中。

我喜欢在调试 CSS 代码时使用红色，所以尝试输入：

.test-slider {
    border: 1px solid red;
}

现在，您可能会亲眼看到 .test-slider 确实居中，但它的 child、.test-slide 固定在其 parent 的左上角，由于 parent 的宽度较大，因此它似乎已关闭。

要解决这个问题，只需设置：

.test-slider {
    width: 20.4em; /* Instead of 25em */
}

因为 .test-slider 是不可见的，只是用来包裹 .test-slide，所以你并不关心关于它的宽度，所以这个解决方案很好。

另一种方法是设置：

.test-slide {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

由于您在 .test-slide 上使用 position: absolute 而不是 position: relative，你不会遇到任何问题。如果以后想改成position: relative，可以设置：

.test-slide {
    display: inline-block;
    margin: 0 auto;
}

或者你可以更好地设置：

.test-slider { /* The parent */
    text-align: center;
}

查看以下小提琴以获得更直观的表示：

有了第一个解→here.
与第二种方案→here.

片段：

.test-slider {
 width: 20.4em;
 height: 30em;
 overflow: hidden;
 position: relative;
  margin: 0 auto;
}

.test-slide {
 position: absolute;
 animation: 30s slider infinite;
 -webkit-animation: 30s test-slider infinite;
 opacity: 0;
}

@keyframes test-slider {
 10% {
  opacity: 1;
 }
 50% {
  opacity: 0;
 }
}

div.test-slide:nth-child(0) {
 animation-delay: 0s;
 -webkit-animation-delay: 0s;
}

div.test-slide:nth-child(1) {
 animation-delay: 15s;
 -webkit-animation-delay: 15s;
}

figure.test {
 font-family: lato !important;
 position: relative;
 float: left;
 overflow: hidden;
 margin: 10% 1%;
 min-width: 15em;
 max-width: 20em;
 width: 100%;
 color: #000000;
 text-align: center;
 font-size: 1em;
 background-color: #2d2d2d;
 padding: 8% 8% 8% 8%;
 background-image: linear-gradient(-25deg, rgba(0, 0, 0, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
 border-radius: 0.3em 0.3em 0.3em 0.3em;
}

figure.test img {
 width: 50%;
 margin-top: 0;
 margin-bottom: 2%;
}

figure.test h2, figure.test h4 {
 font-family: lato;
 text-transform: none;
 margin: 0;
}

figure.test h2 {
 font-weight: bold;
 color: white;
}

figure.test h4 {
 font-weight: normal;
 color: #a6a6a6;
}

figure.test blockquote {
 margin-top: 5%;
 margin-bottom: 0;
 padding: 8%;
 opacity: 1;
 font-style: italic;
 font-size: 1em;
 background-color: white;
 border-radius: 0.3em 0.3em 0.3em 0.3em;
 box-shadow: inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.3);
 text-align: left;
 position: relative;
}

.img-border {
 border: 0.5em solid tan;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
 box-shadow: 0.4em 0.4em 2em rgba(0, 0, 0, 0.4);
}

.img-circle {
 margin: auto;
 display: block;
 position: relative;
 overflow: hidden;
 border-radius: 50%;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 -ms-border-radius: 50%;
 -o-border-radius: 50%;
}

blockquote, blockquote:before, blockquote:after, blockquote::before, blockquote::after {
  margin: auto;
 border: none;
 position: initial;
 content: " ";
 quotes: "1C""1D""18""19";
}

blockquote:before {
 content: open-quote;
}

blockquote::before, blockquote::after {
 display: inline;
}

blockquote:after {
 content: close-quote;
}

<div class="test-slider">
  <div class="test-slide">
    <figure class="test">
      <img class="img-circle img-border" src="http://www.themainconcept.com/wp-content/uploads/2016/04/eric.png" width="40%" />
      <h2>Eric S.</h2>
      <h4>Some Guy</h4>
      <blockquote>Insert cheesy quote here! Lorem ipsum dolor sit amet, at lorem graecis ius, qui at veri vocent.</blockquote>

    </figure>
  </div>
  <div class="test-slide">
    <figure class="test">
      <img class="img-circle img-border" src="http://i1.wp.com/www.visualelegance.ca/wp-content/uploads/2016/07/danielliasquare.png?zoom=2&amp;w=1020" />
      <h2>Daniel &amp; Lia</h2>
      <h4>Couple</h4>
      <blockquote>Words go here from what people have to say.</blockquote>
    </figure>
  </div>
</div>

关于我的不透明度滑块的建议（纯 CSS，无 JS）

Advice on my opacity slider (Pure CSS, No JS)

html

css

slider

opacity