html - Animate.css 和 main.css 文件的排列是否影响功能-6ren

html - Animate.css 和 main.css 文件的排列是否影响功能

转载作者：行者123 更新时间：2023-11-28 07:01:56

28

4

我正在使用 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 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);
}
}

最佳答案

您可以更改脉冲动画以避免名称冲突。

.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/

28

4

0

文章推荐： html - Firefox CSS 错误(在 Chrome 中工作正常)

文章推荐： javascript - PHP 或 Javascript/Jquery - 计算新生儿/成人的年龄

文章推荐： javascript - JavaScript 中的函数表达式与声明有什么区别？

文章推荐： jquery - 导航栏折叠不起作用

Python 是否
我有一个 if 语句，如下所示 if (not(fullpath.lower().endswith(".pdf")) or not (fullpath.lower().endswith(tup
php - 是否/是否有任何浏览器允许控制流构造在脚本标签中存活？
然而，在 PHP 中，可以: only appears if $foo is true. only appears if $foo is false. 在 Javascript 中，能否在一个脚
binary - 是否(曾经有过)为任意二进制格式创建模式语言的努力？
XML有很多好处。它既是机器可读的，也是人类可读的，它具有标准化的格式，并且用途广泛。它也有一些缺点。它是冗长的，不是传输大量数据的非常有效的方法。 XML最有用的方面之一是模式语言。使用模式，您可
sql-server - 是否 CTE
由于长期使用 SQL2000，我并没有真正深入了解公用表表达式。我给出的答案here (#4025380)和 here (#4018793)违背了潮流，因为他们没有使用 CTE。我很欣赏它们对于递
java - 是否 hibernate 分离对象的默认乐观锁定？
我有一个应用程序: void deleteObj(id){ MyObj obj = getObjById(id); if (obj == null) { throw n
mysql - 是否 hibernate 关闭连接？
我的代码如下。可能我以类似的方式多次使用它，即简单地说，我正在以这种方式管理 session 和事务: List users= null; try{ sess
android - 是否/是否有适用于Android的标准程序包结构/层次结构做法？
在开发J2EE Web应用程序时，我通常会按以下方式组织我的包结构 com.jameselsey.. 控制器-控制器/操作转到此处服务-事务服务类，由控制器调用域-应用程序使用的我的域类/对象 D
c++ -/是否/memmove 使用中间缓冲区？
这更多是出于好奇而不是任何重要问题，但我只是想知道 memmove 中的以下片段文档: Copying takes place as if an intermediate buffer were us
algorithm - 在联合查找算法中，是否/如何调整节点在路径压缩中的等级
路径压缩涉及将根指定为路径上每个节点的新父节点——这可能会降低根的等级，并可能降低路径上所有节点的等级。有办法解决这个问题吗？有必要处理这个吗？或者，也许可以将等级视为树高的上限而不是确切的高度？谢
C++ 是否 reinterpret_cast 总是返回结果？
我有两个类，A 和 B。A 是 B 的父类，我有一个函数接收指向 A 类型类的指针，检查它是否也是 B 类型，如果是将调用另一个函数，该函数接受一个指向类型 B 的类的指针。当函数调用另一个函数时，我
c++ - Valgrind 是否/可以使用多个处理器？
有没有办法让 valgrind 使用多个处理器？我正在使用 valgrind 的 callgrind 进行一些瓶颈分析，并注意到我的应用程序中的资源使用行为与在 valgrind/callgrind
haskell - 是否/应该将函数包装到 monad 转换器中被视为不好的做法？
假设我们要使用 ReaderT [(a,b)]超过 Maybe monad，然后我们想在列表中进行查找。现在，一个简单且不常见的方法是: 第一种可能性 find a = ReaderT (looku
jQuery 检查 attr 是否=值
我的代码似乎有问题。我需要说的是: if ( $('html').attr('lang').val() == 'fr-FR' ) { // do this } else { // do
azure - AKS 是否/是否支持跨更新域传播 Pod？
根据this文章(2018 年 4 月)AKS 在可用性集中运行时能够跨故障域智能放置 Pod，但尚不考虑更新域。很快就会使用更新域将 Pod 放入 AKS 中吗？最佳答案当您设置集群时，它已经自
php - 查询以检查同一表中的 row1 = row2 是否
course | section | type comart2 : bsit201 : lec comart2 :
android - AAR 依赖项 - 是否 bundle ？
我正在开发自己的 SDK，而这又依赖于某些第 3 方 SDK。例如 - OkHttp。我应该将 OkHttp 添加到我的 build.gradle 中，还是让我的 SDK 用户包含它？在这种情况下，
functional-programming - Rust 是否/将支持函数式编程习惯用法？
随着 Rust 越来越充实，我对它的兴趣开始激起。我喜欢它支持代数数据类型，尤其是那些匹配的事实，但是对其他功能习语有什么想法吗？例如标准库中是否有标准过滤器/映射/归约函数的集合，更重要的是，您能
html - h1 :before{ } work for seo? 是否
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。这个问题似乎与 help center 中定义的范围内的编程无关。 . 关闭 9 年前。 Improve
php - 是否/为什么 php 强制您使用对象构造函数
我一直在研究 PHP 中的对象。我见过的所有示例甚至在它们自己的对象上都使用了对象构造函数。 PHP 会强制您这样做吗？如果是，为什么？例如: firstname = $firstname;
php - PHP 是否(在内部)以不同方式处理数字索引数组？
...比关联数组？关联数组会占用更多内存吗？ $arr = array(1, 1, 1); $arr[10] = 1; $arr[] = 1; // <- index is 11; does the

首页

博学

6Ren·AI

商城

html - Animate.css 和 main.css 文件的排列是否影响功能