jquery - 增强 gif 背景翻转的性能

In lại Tác giả: Walker 123 更新时间：2023-11-28 08:58:43 29 4

$( ".day" ).mouseenter(function() {
  $( ".play" ).append( "" );
});

hình ảnh {
    bán kính đường viền: 50%;
}
.day {
    margin: 15px;
    height: 90px;
    chiều rộng: 90px;
    nổi: trái;
    vị trí: tương đối;
    con trỏ: con trỏ;
}
.play {
    height: 90px;
    vị trí: tuyệt đối;
    chiều rộng: 90px;
    trái: 50%;
    trên cùng: 50%;
    margin: -45px 0 0 -45px;
    chỉ số z: -1;
    transition-duration: 100ms;
    transition-timing-function: ease-in-out;
    -moz-transition-property: all;
    -moz-transition-duration: 100ms;
    -moz-transition-timing-function: ease-in-out;
    -webkit-transition-property: all;
    -webkit-transition-duration: 100ms;
    -webkit-transition-timing-function: ease-in-out;
    -o-transition-property: all;
    -o-transition-duration: 100ms;
    -o-transition-timing-function: ease-in-out;
}
.play img {
    chiều rộng: 100%;
    bán kính đường viền: 50%;
}
.badge {
    height: 35px;
    chiều rộng: 35px;
    background: #ed2c27;
    bán kính đường viền: 50%;
    font-size: 18px;
    vị trí: tuyệt đối;
    trên cùng: 0;
    phải: 0;
    căn chỉnh văn bản: giữa;
    font-family:'Satisfy', cursive;
}
.day:hover .spinner {
    vị trí: tuyệt đối;
    hiển thị: khối;
    height: 95px;
    width: 95px;
    trái: -5px;
    top: -5px;
    bán kính đường viền: 50%;
    border: 3px solid transparent;
    border-top-color: black;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
.day:hover .spinner:before {
    nội dung:"";
    vị trí: tuyệt đối;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    bán kính đường viền: 50%;
    border: 3px solid transparent;
    border-top-color: black;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
.day:hover .spinner:after {
    nội dung:"";
    vị trí: tuyệt đối;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    bán kính đường viền: 50%;
    border: 3px solid transparent;
    border-top-color: black;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

    
    

     1

29 4 0

• java - 增强 for 循环的最后一次迭代

  我正在尝试使用增强的 for 循环遍历 Iterable，但我无法确定何时处理最后一个值。 public void apply(Tuple key,

• excel - 增强 excel 多个查找和替换脚本

  我正在使用以下代码在 Sheet2 的 A:H 范围内查找和替换 Sheet1 中存在的单词列表(ColA 用于 FIND 单词，ColB 用于 REPLACE 单词)。它执行这项工作，但非常缓慢。可

• java - 增强 Hibernate 数据库架构？

  我正在使用 Hibernate (JPA2) hibernate.hbm2ddl.auto=update用于测试和 hibernate.hbm2ddl.auto=validate用于生产。 我想要做的

• scala - 增强 Scala 中的预定义方法

  基本问题: 为什么我只能用 Scala 编写: println(10) 为什么我不需要写: Console println(10) 后续问题: 如何引入一个新方法“foo”，它像“println”一样

• 使用 Bazel 增强 Datanucleus

  我正在尝试将 Maven 项目迁移到 Bazel，但在 Datanucleus 增强方面遇到了麻烦。 后 jar -file 已构建，Datanucleus 会查看其中的内部并执行一些字节码操作以增强

• javascript - 增强 JavaScript 代码的技巧

  正在使用 css3 转换进行漂亮的导航。为此还编写了一些 javascript。 但不幸的是它看起来有点凌乱。你们能给我一些优化 javascript 代码的技巧吗？ 笔--> http://code

• buildr - 增强 Builder 发布流程

  我想将自定义任务绑定(bind)到默认构建器发布周期中。我想在项目编译、打包、标记和部署之后但在增加版本号并提交之前运行此代码。 我将如何融入发布周期的这一部分？ 最佳答案 不幸的是，release

• elasticsearch - 基于某些字段的ElasticSearch结果排序(相关分数)(增强)

  我使用ElasticSearch 6.6。我的应用程序通过从不同数据源提取数据来构建ES索引。搜索未指定数据源。它只是建立一个类似的查询: GET employerdata/_search { "

• c++ - 增强::精神::保持空白

  我正在使用此代码将“k1 = v1; k2 = v2; k3 = v3; kn = vn”字符串解析为映射。 qi::phrase_parse( begin,end,

• java - 增强 for 循环上的 ArrayIndexOutOfBounds

  我正在试图弄清楚作业的一部分，但我已经把头撞在墙上有一段时间了。我正在尝试将 DNA 序列转录为 RNA 序列。然而，我收到了 ArrayOutOfBoundsException。我不熟悉使用增强的

• python - 增强 GAE 错误报告以包含警告

  我需要对基于 python Google App Engine 的应用程序的警告进行分类。我从 GAE stackdriver 下载日志。我认为 GAE Stackdriver 错误报告位于 http

• python - 增强 is_valid() 但有异常

  我有一个 django charField，通过 is_valid() 方法进行检查。用户应该在此字段中输入有效的逻辑表达式，因此我编写了一个解析方法，如果表达式不正确，该方法会引发异常。 如何增强

• c - 增强 2 个函数以提供正确的输出

  我编写了以下控制台应用程序，要求用户输入一天。 我需要一些帮助才能改进，以便他们为一周中的所有日子提供正确的答案。 如果用户输入除星期一以外的任何其他日期，则输出为“今天”、“昨天”、“明天”，并在这

• javascript - ES6 中的模块模式错误(增强)

  我在使用带有 ES6 let 关键字的模块模式(扩充)时遇到错误。 这有效。 var Example = ( Example => { Example.name = ""; retur

• java - 线程 - 增强 - java

  我只是问是否线程安全可以使用 我明确指出“doSomething()”是线程安全的。 最佳答案 线程安全取决于您正在迭代的 Collection，而不是 enhanced for 的使用。如果 Col

• javascript - 增强 Jquery 拖放演示

  我有一个非常符合 this Jquery demo 的要求，这是一个简单的购物车演示。基本上，我需要对该演示进行两项改进。 我需要文本输入以及可用的“产品”。因此，当我拖放其中一种产品时，文本字段应随

• mysql - 增强 SQL 查询的性能

  我正在三个表 messages、message_recipients 和 users 上运行查询。 messages表的表结构: id int pk message_id int message te

• java - Java 增强 for 循环中的隐式语句

  这个问题已经有答案了: In detail, how does the 'for each' loop work in Java? (29 个回答) 已关闭 4 年前。 由于增强的 for 循环是只读

• jquery - 增强 gif 背景翻转的性能

  我在 css 中制作了一个很酷的鼠标悬停，当父级鼠标悬停时它会显示动画 gif。 这是我的代码:http://codepen.io/clemeeent/pen/oggzMa 问题是我将有大约 40 天

• javascript - 增强 Knockout 中的数组项上下文

  目前，当使用 Knockout foreach 绑定(bind)时，您可以使用 $index 访问当前索引。我想让其他类似的功能可用于我的内部绑定(bind) - 例如: array(让我访问正在操作