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

时间：2016-07-23 00:11:21

标签： html css css3 slider opacity

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

非常感谢任何给出的建议，我非常感谢。 ：）

以下是我的Codepen的链接：[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: "\201C""\201D""\2018""\2019";
}

blockquote {
}

blockquote:before {
    content: open-quote;
}

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

blockquote:after {
    content: close-quote;
}

JS：

NONE >:)

1 个答案:

答案 0 :(得分：1)

除了给你解决方案更重要的是帮助你真正看到你的元素实际上集中。

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

.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%);
}

由于您在 position: absolute 而非 .test-slide 上使用 position: relative ，因此您不会面对任何问题。如果以后要将其更改为 position: relative ，则可以设置：

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

或者你甚至可以更好地设置：

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

查看以下小提琴，以获得更直观的表现形式：

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

<强>段：

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题