【问题标题】:Animate.css not working properlyAnimate.css 无法正常工作
【发布时间】:2017-05-12 18:04:39
【问题描述】:

所以,我尝试使用animate.css,终于让它工作了。但是一些动画会导致我使用它的元素从它的原始位置移动,但不是所有的。

有人知道是什么原因造成的吗?

<!DOCTYPE html>
<html>
  <head>
    <title>deadinside</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/animate.min.css">
  </head>

  <script src="js/ctrl.js"> </script>

  <body oncontextmenu="return false" onkeypress="return disableCtrlKeyCombination(event);" onkeydown="return disableCtrlKeyCombination(event);" >

    <video autoplay="true" loop="true">
      <source src="videos/antarctica.mp4" type="video/mp4">
      <source src="videos/di.webm" type="video/webm">
    </video>

    <a href="http://steamcommunity.com/groups/deadinsiide" target="_blank"><img src="img/deadinsiderw.png" width="484" height="87" class="image animated fadeInUp"/></a>

    <script src="js/f12.js"> </script>

  </body>
</html

.

body, html {
    margin: 0;
    padding:  0;
}

video {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 1;
}

}

.text {
    z-index: -1;
    position: absolute;
    background: rgba(0, 0, 0, 0);
}

a {
    font-family: Helvetica, Arial;
    font-size: 6em;
    color: white;
    text-align:
}

.image{
    position: fixed;
    /*element can move on the screen (only screen, not page)*/

    left:50%;top:50%;
    /*set the top left corner of the element on the center of the screen*/

    transform:translate(-50%,-50%);
    /*reposition element center with screen center*/

    background: rgba(0, 0, 0, 0);

   z-index:10000;
   /*actually, this number is the count of the elements of page  plus 1 :)*/
   /*if you need that holds the element top of the others. */
}

【问题讨论】:

  • 请提供示例代码?
  • 我已经添加了代码

标签: html css animate.css


【解决方案1】:

我已经解决了。我将图像居中的方式是问题所在。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-12-01
    • 1970-01-01
    • 2016-09-01
    • 2012-07-11
    • 2018-04-08
    • 2017-04-20
    • 2018-10-02
    • 2016-09-04
    相关资源
    最近更新 更多