【发布时间】: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