关于我的不透明滑块的建议(纯CSS，没有JS)

Question

我已经创建了这支笔的不透明滑块，我想使用客户证明。我的CSS的推荐信从另一支笔，我可以链接在这里，如果有人愿意。我对编码很陌生，而且是个极端的初学者，所以请原谅我的愚蠢错误。：对于如何改进这一设计，以及如何使它变得更通用，我有什么建议吗?我增加了更多的推荐信(也许是6-8)。我有点困惑的动画属性和他们是如何工作，即延迟和动画的持续时间。我一直在玩这些数字直到它起作用。我计划在我的网站页脚有这个“滑块”。有一件事让我很困扰，那就是它不是中心。我怎么能把滑块对准中心？另外，对于“滑块”的高度，我应该做些什么？我目前的做法并没有什么意义。有点像那种代码。

非常感谢你的建议，我非常感激。:)

下面是指向我的Codepen：链接的链接

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: "\201C""\201D""\2018""\2019";
}

blockquote {
}

blockquote:before {
    content: open-quote;
}

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

blockquote:after {
    content: close-quote;
}

联署材料：

NONE >:)

Answer 1

除了给您解决方案之外，更重要的是帮助您实际看到元素实际上是以为中心的。

我喜欢在调试CSS代码时使用red，所以尝试将：

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

现在，您可能会看到.test-slider确实是居中的，但是它的子.test-slide，锚定在其父服务器的左上角，并且由于父服务器的宽度更大，因此它似乎是关闭的。

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

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

由于.test-slider是不可见的，只是用来包装.test-slide，，所以您并不真正关心它的宽度，所以这个解决方案很好。

另一种方法是设置：

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

因为您在.test-slide上使用了.test-slide而不是position: relative，，所以您不会遇到任何问题。如果以后要将其更改为position: relative，，只需设置：

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

或者你可以更好地设置：

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

请查看以下提示，以获得更直观的表示：

• 使用第一个解决方案→→。
• 使用第二个解决方案→→。

片段：

​

.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: "\201C""\201D""\2018""\2019";
}

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>

​