小编Cri*_*sti的帖子

我有一个样本：

关联

代码 HTML：

<img src="https://i1.wp.com/img.celmaitare.net/wp-content/uploads/2014/12/Poze-Peisaje-179.jpg" class="img">

代码CSS：

@keyframes fade-img {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 0.5;
        filter: alpha(opacity=50);
        -moz-transition: all 0.9s ease;
        -webkit-transition: all 0.9s ease;
    }
}

.img{
  animation-name: fade-bg;
    animation-iteration-count: infinite;
    animation-duration: 2s;
}

我想在 2 秒后重复这个动画，但它不明白为什么它不起作用。

你能告诉我出了什么问题吗？是语法错误吗？

谢谢你！

我有这个样本：

关联

代码 HTML：

<div class="field">
    <label>First Name</label>
    <div class="control">
        <input type="text" class="input-text">
    </div>
</div>

代码 CSS：

.field{
  position: relative;
}

.label {
  position: absolute;
  pointer-events: none;
  left: 10px;
  top: 2px;
  transition: 0.2s ease all;
  font-size: 15px;
}

input:focus ~ .label,
input:not(:focus):valid ~ .label {
  top: -6px;
}

基本上我希望当用户在输入中写一些东西时，标签会移动到输入上。

这只能从css中获得吗？

您能否更改我创建的示例以准确了解这是如何完成的？

提前致谢！

我有这个样本:

Codepen

.container-video{
  background:red;
  max-width:500px;
}
video{
  width:100%;
}

    <div class="container-video">
      <video autoplay muted loop playsinline poster="https://media.giphy.com/media/5CIRqPOk0141W/giphy.gif">
      <source src="https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/mp4_1080/71439ccd73c74ecc8bbab7abd3bb98bc_mp4_1080.mp4" type="video/mp4" />
      <source src="https://multicdn.synq.fm/projects/bb/56/bb56f28429b942c08dc5128e4b7ba48c/derivatives/videos/71/43/71439ccd73c74ecc8bbab7abd3bb98bc/webm_720/71439ccd73c74ecc8bbab7abd3bb98bc_webm_720.webm" type="video/webm" />
      </video>
    </div>  

问题是在最高点"container-video".请看下面的图片,准确了解问题所在

你能帮我解决这个问题吗？谢谢