我正在使用 Twitter Bootstrap 构建我的第一个网站，并将现有 Bootstrap 主题模板中的元素合并到我的 HTML 和 CSS 文件中，以实现多种动画效果。
我正在使用的效果之一是当鼠标悬停在位于 btn-circle 内的超棒字体 在我的主页上。所需“脉冲”效果的样式位于 double-arrow-down 图标上时的 pulse 效果main.css 中。今天我添加了一个新文件 (animate.css) - 我用它来实现页面页脚联系表的一些动画效果。但是，看起来我在 main.css 上为 hover: 脉冲效果设置的样式正在被 animate.css< 上的样式覆盖 文件。将鼠标悬停在我主页上的 btn-circle 元素上时，脉冲效果不再起作用。当我删除 animate.css 时，效果恢复正常。
我尝试将 !important 添加到 main.css 的以下类中 - 但这似乎无法解决问题。我的 header 中的 css 文件链接的顺序是否影响样式？
Here is the 'pulse' effect I would like to achieve
谢谢
HTML:-
<head>
<title>Home | Jon Howlett</title>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Montserrat%Roboto:900' rel='stylesheet' type='text/css'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="shortcut icon" href="favicon.ico" />
<link href="css/animate.css" rel="stylesheet" type="text/css">
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
</head>
<header class="intro" id="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Jon Howlett</h1>
<p class="intro-text">Aspiring web designer<br/>& front-end developer.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
main.css 文件:-
.btn-circle i.animated,
#nav-footer i.animated{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 2s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 2s;
}
.btn-circle:hover i.animated,
#nav-footer:hover i.animated{
-webkit-animation-name: pulse;
-moz-animation-name: pulse;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
.btn:hover {
background-color: #D35F45;
color: white;
transition-duration: 0.3s;
border: 2px solid #D35F45;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
最佳答案
您可以更改脉冲动画以避免名称冲突。
.btn-circle i.animate,
#nav-footer i.animate{
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 2s;
-moz-transition-property: -moz-transform;
-moz-transition-duration: 2s;
}
.btn-circle:hover i.animate,
#nav-footer:hover i.animate{
-webkit-animation-name: custom-pulse;
-moz-animation-name: custom-pulse;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
}
.btn:hover {
background-color: #D35F45;
color: white;
transition-duration: 0.3s;
border: 2px solid #D35F45;
}
@-webkit-keyframes custom-pulse{
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes pulse {
0% {
-moz-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
transform: scale(1);
}
}
并将 html 更改为:
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animate"></i>
</a>
关于html - Animate.css 和 main.css 文件的排列是否影响功能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33177983/