如何使用CSS实现具有方面感知的幽灵按钮

发布时间:2022-03-01 09:36:24 作者:小新
来源:亿速云 阅读:135

小编给大家分享一下如何使用CSS实现具有方面感知的幽灵按钮,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  基础

  我们先创建一个按钮,很简单!

  <button>Boo!</button>

  我们使用 CSS 自定义属性完成样式,这样更易于维护。

  button {

  --borderWidth: 5;

  --boxShadowDepth: 8;

  --buttonColor: #f00;

  --fontSize: 3;

  --horizontalPadding: 16;

  --verticalPadding: 8;

  background: transparent;

  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);

  box-shadow: calc(var(--boxShadowDepth) * 1px) calc(var(--boxShadowDepth) * 1px) 0 #888;

  color: var(--buttonColor);

  cursor: pointer;

  font-size: calc(var(--fontSize) * 1rem);

  font-weight: bold;

  outline: transparent;

  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);

  transition: box-shadow 0.15s ease;

  }

  button:hover {

  box-shadow: calc(var(--boxShadowDepth) / 2 * 1px) calc(var(--boxShadowDepth) / 2 * 1px) 0 #888;

  }

  button:active {

  box-shadow: 0 0 0 #888;

  }

  我们实现了一个按钮及悬停效果,但是没有填充。我们继续进行!

  添加填充

  我们额外创建元素做为按钮填充时的状态。通过 clip-path 将它隐藏。当鼠标悬停在按钮上时设置 clip-path将元素过渡显示出来。

  它们必须与父按钮对齐。这里我们的 CSS 变量会显示出它的优势。

  本来我们可以通过伪元素实现,但是它不满足我们需要的四个方面,而且它还会干扰可访问性&hellip;稍后我们再讲。

  我们先添加一个从左到右填充的效果。首页我们要添加一个 span 标签,它与按钮具有相同的内容。

  <button>Boo!

  <span>Boo!</span>

  </button>

  下面我们要将 span 与按钮重叠对齐。

  button span {

  background: var(--buttonColor);

  border: calc(var(--borderWidth) * 1px) solid var(--buttonColor);

  bottom: calc(var(--borderWidth) * -1px);

  color: var(--bg, #fafafa);

  left: calc(var(--borderWidth) * -1px);

  padding: calc(var(--verticalPadding) * 1px) calc(var(--horizontalPadding) * 1px);

  position: absolute;

  right: calc(var(--borderWidth) * -1px);

  top: calc(var(--borderWidth) * -1px);

  }

  最后,我们通过裁剪使元素隐藏,当悬停时更新裁剪规则使元素显示出来。

  button span {

  --clip: inset(0 100% 0 0);

  -webkit-clip-path: var(--clip);

  clip-path: var(--clip);

  transition: clip-path 0.25s ease;

  // ...Remaining div styles

  }

  button:hover span {

  --clip: inset(0 0 0 0);

  }

  添加方向感知

  那么,如何感知方向呢?我们需要四个要素。每个元素将负责检测悬停入口点。使用 clip-path,我们可以将按钮区域分为四个部分。

  我们在按钮里添加四个 span,并放在四个方面以进行填充按钮。<button>

  Boo!

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  </button>

  button span {

  background: var(--bg);

  bottom: calc(var(--borderWidth) * -1px);

  -webkit-clip-path: var(--clip);

  clip-path: var(--clip);

  left: calc(var(--borderWidth) * -1px);

  opacity: 0.5;

  position: absolute;

  right: calc(var(--borderWidth) * -1px);

  top: calc(var(--borderWidth) * -1px);

  z-index: 1;

  }

  我们将每个元素进行定位并使用 CSS 变量赋予它们背景色及裁剪规则。

  button span:nth-of-type(1) {

  --bg: #00f;

  --clip: polygon(0 0, 100% 0, 50% 50%, 50% 50%);

  }

  button span:nth-of-type(2) {

  --bg: #f00;

  --clip: polygon(100% 0, 100% 100%, 50% 50%);

  }

  button span:nth-of-type(3) {

  --bg: #008000;

  --clip: polygon(0 100%, 100% 100%, 50% 50%);

  }

  button span:nth-of-type(4) {

  --bg: #800080;

  --clip: polygon(0 0, 0 100%, 50% 50%);

  }

  为了测试,悬停时我们改变一下元素的透明度。

  button span:nth-of-type(1):hover,

  button span:nth-of-type(2):hover,

  button span:nth-of-type(3):hover,

  button span:nth-of-type(4):hover {

  opacity: 1;

  }

  哎呀,这里有个问题。如果我们进入并悬停一个分段,然后悬停在另一分段上,则填充方向将会发生变化。这看起来很不对劲。要解决此问题,我们可以在悬停时设置 z-index 和 clip-path 来填充这一空间。

  button span:nth-of-type(1):hover,

  button span:nth-of-type(2):hover,

  button span:nth-of-type(3):hover,

  button span:nth-of-type(4):hover {

  --clip: polygon(0 0, 100% 0, 100% 100%, 0 100%);

  opacity: 1;

  z-index: 2;

  }

  合到一起

  现在我们知道如何创建填充动画了,也知道如何判断方向了。那我们应该如何将它们放到一起实现想要的效果呢?答案是同级选择器!

  当我们将鼠标悬停在一方向块上时,我们可以填充指定的元素。

  首先,我们要更新一下我们的代码:

  <button>

  Boo!

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <b>Boo!</b>

  <b>Boo!</b>

  <b>Boo!</b>

  <b>Boo!</b>

  </button>

  接下来,我们需要更新一下我们的 CSS,填充样式我们可以复用从左到右的样式。但需要为每个元素设置不同的 clip-path。我们按第一个在上,第二个在右,第三个在下,第四个在左的顺序设置。

  button b:nth-of-type(1) {

  --clip: inset(0 0 100% 0);

  }

  button b:nth-of-type(2) {

  --clip: inset(0 0 0 100%);

  }

  button b:nth-of-type(3) {

  --clip: inset(100% 0 0 0);

  }

  button b:nth-of-type(4) {

  --clip: inset(0 100% 0 0);

  }

  最后一步是鼠标悬停在对应方向块时更新对应元素的 clip-path。

  button span:nth-of-type(1):hover &mdash;&mdash; b:nth-of-type(1),

  button span:nth-of-type(2):hover &mdash;&mdash; b:nth-of-type(2),

  button span:nth-of-type(3):hover &mdash;&mdash; b:nth-of-type(3),

  button span:nth-of-type(4):hover &mdash;&mdash; b:nth-of-type(4) {

  --clip: inset(0 0 0 0);

  }

  至此,我们具有方向感知性的幽灵按钮就实现了。

  可访问性

  当按钮不可访问里,会显示如下状态。

  这些额外的元素使屏幕阅读器重复阅读了四次。所以,我们需要将它们隐藏起来。

  <button>

  Boo!

  <span></span>

  <span></span>

  <span></span>

  <span></span>

  <b aria-hidden="true">Boo!</b>

  <b aria-hidden="true">Boo!</b>

  <b aria-hidden="true">Boo!</b>

  <b aria-hidden="true">Boo!</b>

  </button>

以上是“如何使用CSS实现具有方面感知的幽灵按钮”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. 使用CSS制作按钮的方法
  2. CSS如何实现发光的按钮效果

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css

上一篇:如何使用CSS实现开关按钮

下一篇:如何使用纯css实现太极阴阳鱼动画

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》