Question

当试图将伪元素悬停时，我试图触发CSS动画。

我目前有2个视频，这些视频根据鼠标悬停在浏览器的50％一侧来显示，我想应用类似的效果来为某些文本添加动画。

我希望<p>标签向上移动并淡入，同时像本网站一样以相同的方式同时向上移动<h1>标签：

以下是我为<p>和<h1>标签使用的结构：

<div class="caption_overlay">
    <div class="caption_grid">
      <div class="live_caption">

        <h1>A mix of apartments and terrace homes</h1>

        <a href="#"><p>Explore</p></a>

        </div>

        <div class="eat_caption">

        <h1>A brand new public eat street</h1>

        <a href="#"><p>Explore</p></a>

      </div>

    </div>    
</div>

CSS

视频的当前代码

.video_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.video_hover::before {
  content:"";
  display:block;
  width:50%;
  height:100%; 
  position: absolute;
  top: 0;
  z-index:100;
}

.video_hover video {
  display:block;
  width: 100%;
  height: 100%;
}

.live_video:hover video {
  opacity:0;
} 

.live_video::before {
  right: 0;
}

.live_video:hover + .eat_video video {
  opacity:1; 
} 

.eat_video video {
  opacity:0;
} 

.eat_video::before {
  left: 0;
}

文本动画的代码示例。我希望h1和p标签以padding-top开头：100px;并根据鼠标是在屏幕的左侧还是右侧（如我所引用的网站）

进行删除或添加填充操作

.live_caption h1:hover, .eat_caption h1:hover {
  padding-top: 0px;
  -webkit-transition: .4s ease-in-out opacity;
  -moz-transition: .4s ease-in-out opacity;
  -o-transition: .4s ease-in-out opacity;
  transition: .4s ease-in-out opacity;
}

.live_caption p:hover, .eat_caption p:hover  {
  padding-top: 0px;
  opacity: 1;
  -webkit-transition: .4s ease-in-out opacity;
  -moz-transition: .4s ease-in-out opacity;
  -o-transition: .4s ease-in-out opacity;
  transition: .4s ease-in-out opacity;
}

Answer 1

仅CSS方法可以通过将标题标记（即<h1>和<p>标签）与相应的视频元素in your existing page structure嵌套在一起来实现：

<div class="live_video video_hover">
  <video muted class="video" autoplay="autoplay" loop="loop" preload="auto">
    <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" >
 </video>

 <!-- Nest caption block with live_video video block -->
 <div class="caption">
   <h1>A mix of apartments and terrace homes</h1>
   <a href="#">
     <p>Explore</p>
   </a>
 </div>

</div>

这样，您就可以指定CSS，该CSS可以修改（每个视频的）新引入的.caption元素的transform属性，以使各个字幕的“ y翻译”在{ {1}}和0%，具体取决于用户互动。

要在翻译字幕时获得平滑的动画效果，请将transition属性应用于100%属性：

transform

这样做会使字幕在转换值更改时在不同的转换之间平滑地进行动画处理。

在代码中，该解决方案可以实现为：

transition: transform ease-in-out 0.5s

.video_hover {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  cursor: pointer;
  /* Add this */
  overflow: hidden;
}

.video_hover video {
  display: block;
  width: 100%;
  height: 100%;
}

.video_hover::before {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 100;
}

.live_video::before {
  left: 0;
}

.eat_video::before {
  right: 0;
}

.eat_video video {
  visibility: hidden;
}

.live_video:hover video {
  visibility: hidden;
}

.live_video:hover+.eat_video video {
  visibility: visible;
}


/* New CSS begins */


/* Define common styling for caption blocks of either video */

.caption {
  position: absolute;
  bottom: 0;
  width: 50%;
  z-index: 150;
  transition: transform ease-in-out 0.5s;
  background: pink;
  pointer-events: none;
}


/* Live video caption visible by default (out of view) */

.live_video .caption {
  left: 0;
  transform: translateY(100%);
}


/* Eat video caption hidden by default (out of view) */

.eat_video .caption {
  right: 0;
  transform: translateY(100%);
}


/* Animate eat video caption into view when hovering the pesudo element */

.live_video:hover .caption {
  transform: translateY(0%);
}


/* Animate live video caption out of view when hovering the pesudo element */

.eat_video:hover .caption {
  transform: translateY(0%);
}

将鼠标悬停在伪元素上时触发CSS动画吗？

1 个答案: