css在悬停时暂停幻灯片

时间：2015-06-14 20:24:02

标签： html css animation

我正试着这样做，当我将鼠标悬停在幻灯片上时，它会暂停动画。

其次，我试图使Pause / Resume按钮起作用以产生同样的效果。

我正在努力解决这个问题。任何帮助，将不胜感激。 This is what I have so far：

body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
.css-slideshow {
  position: relative;
  max-width: 495px;
  height: 370px;
  margin: 5em auto .5em auto;
}
.css-slideshow figure {
  margin: 0;
  max-width: 495px;
  height: 370px;
  background: #000;
  position: absolute;
}
.css-slideshow:hover figure {
  /*transition: opacity .5s;*/
  /*opacity: 1;*/
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}
.css-slideshow img {
  box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption {
  position: absolute;
  top: 370px;
  color: #000;
  /*background: rgba(0,0,0, .3);*/
  font-size: .8em;
  padding: 8px 12px;
  opacity: 1;
  /*transition: opacity .5s;*/
}
.pauseplay {
  position: relative;
  margin: 5em auto .5em auto;
}
.css-slideshow:hover figure figcaption {
  /*transition: opacity .5s;*/
  opacity: 0.5;
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
  -o-animation-play-state: paused !important;
  animation-play-state: paused !important;
}
.css-slideshow-attr {
  max-width: 495px;
  text-align: right;
  font-size: .7em;
  font-style: italic;
  margin: 0 auto;
}
.css-slideshow-attr a {
  color: #666;
}
.css-slideshow figure {
  opacity: 0;
}
figure:nth-child(1) {
  animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
  animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
  animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
  animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
  animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
  animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
  animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
  animation: xfade 48s 0s infinite;
}
@keyframes xfade {
  0% {
    opacity: 1;
  }
  10.5% {
    opacity: 1;
  }
  12.5% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.css-slideshow.paused figure {
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
  -o-animation-play-state: paused !important;
  animation-play-state: paused !important;
}
.css-slideshow.playing figure {
  -webkit-animation-play-state: running !important;
  -moz-animation-play-state: running !important;
  -o-animation-play-state: running !important;
  animation-play-state: running !important;
}
<div class="css-slideshow">
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" alt="class-header-css3" width="495" height="370" class="alignnone size-full wp-image-172" />
    <figcaption><strong>CSS3:</strong> CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control far
      beyond anything the web has offered before.</figcaption>
  </figure>
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" alt="class-header-semantics" width="495" height="370" class="alignnone size-full wp-image-179" />
    <figcaption><strong>Semantics:</strong> Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.</figcaption>
  </figure>
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-offline.jpg" alt="class-header-offline" width="495" height="370" class="alignnone size-large wp-image-178" />
    <figcaption><strong>Offline &amp; Storage:</strong> Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.</figcaption>
  </figure>
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-device.jpg" alt="class-header-device" width="495" height="370" class="alignnone size-full wp-image-177" />
    <figcaption><strong>Device Access:</strong> Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access to
      microphones and cameras, to local data such as contacts &amp; events, and even tilt orientation.</figcaption>
  </figure>
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-connectivity.jpg" alt="class-header-connectivity" width="495" height="370" class="alignnone size-large wp-image-176" />
    <figcaption><strong>Connectivity:</strong> More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever before.</figcaption>
  </figure>
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-multimedia.jpg" alt="class-header-multimedia" width="495" height="370" class="alignnone size-large wp-image-175" />
    <figcaption><strong>Multimedia:</strong> Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!</figcaption>
  </figure>
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-3d.jpg" alt="class-header-3d" width="495" height="370" class="alignnone size-large wp-image-174" />
    <figcaption><strong>3D, Graphics &amp; Effects:</strong> Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.</figcaption>
  </figure>
  <figure>
    <img src="http://themarklee.com/wp-content/uploads/2013/10/class-header-performance.jpg" alt="class-header-performance" width="495" height="370" class="alignnone size-large wp-image-173" />
    <figcaption><strong>Performance &amp; Integration:</strong> Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.</figcaption>
  </figure>

</div>
<br>
<br>
<br>
<br>
<center>
  <div id="css-slideshow">

    <button onclick="runSlide();">Resume</button>
    <button onclick="stopSlide();">Pause</button>

  </div>
</center>

2 个答案:

答案 0 :(得分：0)

要在悬停时暂停幻灯片放映，您必须设置动画播放状态：暂停图形而不是第36行的图形标题，如下所示：

.css-slideshow:hover figure{
  /*transition: opacity .5s;*/
  opacity: 0.5;
  -webkit-animation-play-state: paused; 
  -moz-animation-play-state: paused; 
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

（你也不需要所有那些。图：悬停声明，甚至不是！重要的）

要使按钮起作用，您可以编写一些Javascript以在点击时添加一个类，具有不同的动画播放状态值。我看到你正在调用那些runSlide和stopSlide函数，但这些函数在JS中没有定义。 根据您的偏好等，有不同的方法可以做到这一点。一个简单的代码可以实现你想要的东西，并且可以是这样的：

var btn = document.getElementById('css-slideshow');

function runSlide(){
  var btnClass = btn.className;
  btn.className = btnClass.concat(" playing");
}

function stopSlide(){
  var btnClass = btn.className;
  btn.className = btnClass.concat(" paused");
}

在这种情况下，不要忘记向div容器添加id="css-slideshow"，使用.css-slideshow.paused figure扩展上方的选择器并使用.css-slideshow.playing figure <创建animation-play-state: running / p>

答案 1 :(得分：0)

暂停并播放CSS动画 - 纯CSS

注意：只有-webkit- prefix is required currently.所有相关的非webkit浏览器都支持标准动画属性。

暂停CSS

选中复选框或悬停.slideshow时，动画暂停：

.css-slideshow:hover figure,
#pauseShow:checked ~ figure {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}

使用兄弟选择器（~）选择所有数字，这将选择复选框输入后的任何figure兄弟。

按钮

选中复选框后，动画将暂停。复选框本身是隐藏的，HTML看起来像这样，并且在之前放置所有<figure>元素：

<input id="pauseShow" type="checkbox">
<label class="pause" for="pauseShow">Pause</label>
<label class="play" for="pauseShow">Play</label>

标签的CSS如下所示：

#pauseShow:checked + label,
#pauseShow:not(:checked) + label + label {
  display: none;
}
  • 选中复选框（动画暂停）时，＆＃34;暂停＆＃34;标签是隐藏的。
  • 如果未选中复选框（动画正在播放），则播放＆＃34;播放＆＃34;标签是隐藏的。

完整示例

＆＃13;
＆＃13; 
body {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-weight: 300;
}
.css-slideshow {
  position: relative;
  max-width: 495px;
  height: 370px;
  margin: 5em auto .5em auto;
}
.css-slideshow figure {
  margin: 0;
  max-width: 495px;
  height: 370px;
  background: #000;
  position: absolute;
}
.css-slideshow:hover figure {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.css-slideshow img {
  box-shadow: 0 0 2px #666;
}
.css-slideshow figcaption {
  position: absolute;
  top: 370px;
  color: #000;
  font-size: .8em;
  padding: 8px 12px;
  opacity: 1;
}
.pauseplay {
  position: relative;
  margin: 5em auto .5em auto;
}
.css-slideshow:hover figure figcaption {
  opacity: 0.5;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.css-slideshow-attr {
  max-width: 495px;
  text-align: right;
  font-size: .7em;
  font-style: italic;
  margin: 0 auto;
}
.css-slideshow-attr a {
  color: #666;
}
.css-slideshow figure {
  opacity: 0;
}
figure:nth-child(1) {
  animation: xfade 48s 42s infinite;
}
figure:nth-child(2) {
  animation: xfade 48s 36s infinite;
}
figure:nth-child(3) {
  animation: xfade 48s 30s infinite;
}
figure:nth-child(4) {
  animation: xfade 48s 24s infinite;
}
figure:nth-child(5) {
  animation: xfade 48s 18s infinite;
}
figure:nth-child(6) {
  animation: xfade 48s 12s infinite;
}
figure:nth-child(7) {
  animation: xfade 48s 6s infinite;
}
figure:nth-child(8) {
  animation: xfade 48s 0s infinite;
}
@-webkit-keyframes xfade {
  0% {
    opacity: 1;
  }
  10.5% {
    opacity: 1;
  }
  12.5% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xfade {
  0% {
    opacity: 1;
  }
  10.5% {
    opacity: 1;
  }
  12.5% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.css-slideshow:hover figure,
#pauseShow:checked ~ figure {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.css-slideshow label {
  position: absolute;
  bottom: -150px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  font-size: 0.8em;
  background: #EEE;
  cursor: pointer;
}
input#pauseShow {
  display: none;
}
#pauseShow:checked + label,
#pauseShow:not(:checked) + label + label {
  display: none;
}
＆＃13; 
<div class="css-slideshow">
  <input id="pauseShow" type="checkbox">
  <label class="pause" for="pauseShow">Pause</label>
  <label class="play" for="pauseShow">Play</label>

  <figure>
    <img alt="class-header-css3" class="alignnone size-full wp-image-172" height="370" src="http://themarklee.com/wp-content/uploads/2013/10/class-header-css3.jpg" width="495">

    <figcaption>
      <strong>CSS3:</strong> CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provides typographic flexibility and control
      far beyond anything the web has offered before.
    </figcaption>
  </figure>

  <figure>
    <img alt="class-header-semantics" class="alignnone size-full wp-image-179" height="370" src="http://themarklee.com/wp-content/uploads/2013/10/class-header-semantics.jpg" width="495">

    <figcaption>
      <strong>Semantics:</strong> Giving meaning to structure, semantics are front and center with HTML5. A richer set of tags, along with RDFa, microdata, and microformats, are enabling a more useful, data driven web for both programs and your users.
    </figcaption>
  </figure>

  <figure>
    <img alt="class-header-offline" class="alignnone size-large wp-image-178" height="370" src="http://themarklee.com/wp-content/uploads/2013/10/class-header-offline.jpg" width="495">

    <figcaption>
      <strong>Offline &amp; Storage:</strong> Web Apps can start faster and work even if there is no internet connection, thanks to the HTML5 App Cache, as well as the Local Storage, Indexed DB, and the File API specifications.
    </figcaption>
  </figure>

  <figure>
    <img alt="class-header-device" class="alignnone size-full wp-image-177" height="370" src="http://themarklee.com/wp-content/uploads/2013/10/class-header-device.jpg" width="495">

    <figcaption>
      <strong>Device Access:</strong> Beginning with the Geolocation API, Web Applications can present rich, device-aware features and experiences. Incredible device access innovations are being developed and implemented, from audio/video input access
      to microphones and cameras, to local data such as contacts &amp; events, and even tilt orientation.
    </figcaption>
  </figure>

  <figure>
    <img alt="class-header-connectivity" class="alignnone size-large wp-image-176" height="370" src="http://themarklee.com/wp-content/uploads/2013/10/class-header-connectivity.jpg" width="495">

    <figcaption>
      <strong>Connectivity:</strong> More efficient connectivity means more real-time chats, faster games, and better communication. Web Sockets and Server-Sent Events are pushing (pun intended) data between client and server more efficiently than ever
      before.
    </figcaption>
  </figure>

  <figure>
    <img alt="class-header-multimedia" class="alignnone size-large wp-image-175" height="370" src="http://themarklee.com/wp-content/uploads/2013/10/class-header-multimedia.jpg" width="495">

    <figcaption>
      <strong>Multimedia:</strong> Audio and video are first class citizens in the HTML5 web, living in harmony with your apps and sites. Lights, camera, action!
    </figcaption>
  </figure>

  <figure>
    <img alt="class-header-3d" class="alignnone size-large wp-image-174" height="370" src="http://themarklee.com/wp-content/uploads/2013/10/class-header-3d.jpg" width="495">

    <figcaption>
      <strong>3D, Graphics &amp; Effects:</strong> Between SVG, Canvas, WebGL, and CSS3 3D features, you're sure to amaze your users with stunning visuals natively rendered in the browser.
    </figcaption>
  </figure>

  <figure>
    <img alt="class-header-performance" class="alignnone size-large wp-image-173" height="370" src="http://themarklee.com/wp-content/uploads/2013/10/class-header-performance.jpg" width="495">

    <figcaption>
      <strong>Performance &amp; Integration:</strong> Make your Web Apps and dynamic web content faster with a variety of techniques and technologies such as Web Workers and XMLHttpRequest 2. No user should ever wait on your watch.
    </figcaption>
  </figure>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题