【问题标题】:How do I attach this ball to the cursor?如何将这个球附加到光标上?
【发布时间】:2018-05-17 14:39:58
【问题描述】:

我目前正在构建一个投资组合。我受到了 fubiz 工作室的启发。他们将这个非常酷的球附在光标上。我想知道是否有人可以解释他们是如何做到这一点的,并且可以给我指导如何构建它。

Fubiz 工作室: http://fubiz.studio/en/selected-projects

【问题讨论】:

标签: javascript html css cursor attachment


【解决方案1】:

尝试将其添加到您的样式表中:

cursor: url("images/cursor.png"), pointer;

【讨论】:

    【解决方案2】:

    正如其他人所说,通过 CSS 实现的最佳形式是使用 cursor 类,如下所示:

    .class{
      cursor: url(images-folder/cursor-image.png), auto;
    }
    

    另一方面,想想你有很多 CSS 类可以用来修改和“玩”光标:

    .alias {cursor: alias;}
    .all-scroll {cursor: all-scroll;}
    .auto {cursor: auto;}
    .cell {cursor: cell;}
    .context-menu {cursor: context-menu;}
    .col-resize {cursor: col-resize;}
    .copy {cursor: copy;}
    .crosshair {cursor: crosshair;}
    .default {cursor: default;}
    .e-resize {cursor: e-resize;}
    .ew-resize {cursor: ew-resize;}
    .grab {cursor: grab;}
    .grabbing {cursor: grabbing;}
    .help {cursor: help;}
    .move {cursor: move;}
    .n-resize {cursor: n-resize;}
    .ne-resize {cursor: ne-resize;}
    .nesw-resize {cursor: nesw-resize;}
    .ns-resize {cursor: ns-resize;}
    .nw-resize {cursor: nw-resize;}
    .nwse-resize {cursor: nwse-resize;}
    .no-drop {cursor: no-drop;}
    .none {cursor: none;}
    .not-allowed {cursor: not-allowed;}
    .pointer {cursor: pointer;}
    .progress {cursor: progress;}
    .row-resize {cursor: row-resize;}
    .s-resize {cursor: s-resize;}
    .se-resize {cursor: se-resize;}
    .sw-resize {cursor: sw-resize;}
    .text {cursor: text;}
    .url {cursor: url(myBall.cur),auto;}
    .w-resize {cursor: w-resize;}
    .wait {cursor: wait;}
    .zoom-in {cursor: zoom-in;}
    .zoom-out {cursor: zoom-out;}
    

    拖拽背景部分主要是处理背景图片和css/js,最后是混合所有web开发工具。

    【讨论】:

      【解决方案3】:

      我想这就是你想要的

      .custom {
        cursor: url(images/my-cursor.png), auto;
      }
      

      https://css-tricks.com/almanac/properties/c/cursor/

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2022-11-08
        • 1970-01-01
        • 1970-01-01
        • 2021-01-01
        • 2013-08-16
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多