1
私はanimate.cssを使用しようとしましたが、ついにそれが動作するようになりました。しかし、アニメーションの中には、元の位置から移動する要素がありますが、すべてではありません。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. */
}
サンプルコードをお願いします。 –
コードを追加しました – sebbejar