0

我目前正在学习 HTML5/CSS/jQuery。我想用基于 CSS 的动画制作一篇简单的文章缩略图。我正在使用 CodePen 轻松分享这些小东西。不幸的是，我发现了一些问题，我不知道如何解决。

1. 缩放变换 我的第一个问题是添加到.singleArticle 类中的缩放变换不起作用。这可能是因为与其他班级发生冲突，但我找不到。

.singleArticle:hover {
   -webkit-box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.1);
   box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.1);
   -moz-transform: scale(1.2);
   -webkit-transform: scale(1.2);
   -o-transform: scale(1.2);
   -ms-transform: scale(1.2);
   transform: scale(1.2);
}

2. FontAwsome 第二个问题是 :nth-child() 选择器。我想了解它在实践中是如何工作的（这就是我在这里使用它的原因）。我已经尝试了很多东西，但找不到错误在哪里。

.singleArticle .cover {
   height: 250px;
   background-size: cover;
   background: #ccc;
   width: 100%;
   color: white;
   background-position: center;
   background-size: cover;
}

.singleArticle .cover:nth-child(1) {
   background-image: url("http://www.surfermag.com/wp-content/uploads/2015/12/DecodingStyle_5.jpg");
}

.singleArticle .cover:nth-child(2) {
   background-image: url("http://www.fatbmx.com/uploads4/2014Q1/viki1.jpg");
}

3. 火狐浏览器 火狐浏览器 中的所有块都是不可见的。也找不到任何解决办法。

你能指出我在哪里犯错吗？可能最简单的方法就是看一下 codepen，因为将整个代码放在这里可能不是最好的主意。

http://codepen.io/danzawadzki/pen/vymVed
4

2 回答 2

1

对于第 2 点，nth-child(n) 选择器匹配作为其父级的第 n 个子级的每个元素，无论其类型如何，因此“n”可以是数字、公式、关键字。您可以参考https://css-tricks.com/almanac/selectors/n/nth-child/。

对于第 3 点，请移除 .singleArticle 下的 opacity: 0。

.singleArticle {
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
    background: #fff;
    width: 430px;
    display: inline-block;
    margin: 15px;
}
于 2016-11-24T08:28:31.447 回答
1

应该可以正常工作。

.singleArticle .cover {
  /* You can just use 'background' */
  background: #ccc url("") center/cover no-repeat;
  color: white;
  height: 250px;
}

/* nth-child selector for .singleArticle, that applies to .cover */

.singleArticle:nth-child(1) .cover {
  background-image: url("http://www.surfermag.com/wp-content/uploads/2015/12/DecodingStyle_5.jpg");
}
.singleArticle:nth-child(2) .cover {
  background-image: url("http://www.fatbmx.com/uploads4/2014Q1/viki1.jpg");
}
.singleArticle:hover {
  box-shadow: 0 10px 20px 5px rgba(1, 1, 1, 0.5);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
  /* just extra visual effect */
  transition: box-shadow 300ms, transform 300ms;
  z-index: 1;
}
<div class="singleArticle">
  <div class="cover"></div>
</div>
<div class="singleArticle">
  <div class="cover"></div>
</div>

于 2016-11-24T09:05:46.813 回答