Question

我正在使用Twitter Bootstrap构建我的第一个网站，并将现有Bootstrap主题模板中的元素合并到我的HTML和CSS文件中，以实现大量动画效果。

当我将鼠标悬停在我主页上位于pulse内的字体很棒的double-arrow-down图标上时，我使用的效果之一就是btn-circle效果。所需“脉冲”效果的样式位于main.css。今天我已经添加了一个新文件（animate.css） - 我正在使用它来在我的页面页脚的联系表单上实现一些动画效果。但是，main.css脉冲效果hover:上的样式正好被animate.css文件上的内容覆盖。将鼠标悬停在我主页上的btn-circle元素上时，脉冲效果不再有效。当我删除animate.css时，效果会恢复正常。

我尝试将!important添加到main.css上的以下类中 - 但这似乎无法解决问题。我的header中的css文件链接是否会影响样式？

Here is a link to my website

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/>&amp; 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);
}
}

Answer 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>

是否安排Animate.css和main.css文件影响功能

1 个答案: