Question

好吗？

我有一个小问题来集中DIV我是为了产生警告，我注意到动画是我用的问题，但无法弄清楚如何解决这个问题。

html, body{
  background-color: #DDD;
}
#aviso {
	text-align: center;
	cursor: pointer;
	margin: 0 auto;
	 -webkit-border-radius: 10px; 
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: black;
	padding: 20px;
	position: fixed;
	opacity: 0.95;
	-moz-opacity: 0.90;
	filter: alpha(opacity=90);
	top: 20%;
	left: 50%;
	transform: translate(-50%, 0);
	z-index: 999;
	display: block; 
  -vendor-animation-duration: 6s;
  -vendor-animation-delay: 6s;
  -vendor-animation-iteration-count: infinite;
}
#aviso p{
    color: white;
}
#aviso i{
    font-size: 70px;
    color: white;
}

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//daneden.github.io/animate.css/animate.min.css">

<div id="aviso" class="animated slideOutDown" onclick="">
    <p><i class="fa fa-exclamation-triangle"></i></p>
    <p>Campos obrigatórios não foram preenchidos</p>
</div>

http://codepen.io/KaeDesign/pen/GJNPZW

有人可以帮我一把吗？请注意，如果没有Animate.css，它通常会居中。

由于

Answer 1

我猜你想让通知滑下然后保持正确吗？如果是这种情况，请执行以下操作：

1）使用课程＆＃34; slideInDown＆＃34;而不是＆＃34; slideOutDown＆＃34; 2）用位置：relative包装带有.container元素的#aviso 3）给予#aviso保证金的绝对头寸：10％自动; 4）Nix动画相关的CSS

所以html看起来像：

<div class="container" style="position:absolute">
    <div id="#aviso">some stuff</div>
</div>

元素#aviso看起来像：

#aviso {
  text-align: center;
  cursor: pointer;
  margin: 10% auto;
  width: 400px;
  -webkit-border-radius: 10px; 
  -moz-border-radius: 10px;
  border-radius: 10px;
  background-color: black;
  padding: 20px;
  position: relative;
  opacity: 0.95;
  -moz-opacity: 0.90;
  filter: alpha(opacity=90);
  transform: translate(-50%, 0);
  z-index: 999;
  display: block;
}

工作示例：http://codepen.io/JordanLittell/pen/KpNbyr

div集中animate.css

1 个答案: