文章/答案/技术大牛

发布

社区首页 >问答首页 >在尾风CSS中使用彩色方框阴影来实现NProgress发光效果？

问在尾风CSS中使用彩色方框阴影来实现NProgress发光效果？
EN

Stack Overflow用户

提问于 2021-07-25 12:39:57

回答 1查看 726关注 0票数 1

我想在接近尾部的进度条上做一个发光效果，就像https://codepen.io/brundolf/pen/YWEgLJ一样

我正在使用NProgress。这是用于创建发光效果的CSS：

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  opacity: 1.0;
  transform: rotate(3deg) translate(0px, -4px);
}

我将其转换为Tailwind，如下所示：

/* Fancy blur effect */
#nprogress .peg {
  box-shadow: 0 0 10px #29d, 0 0 5px #29d;
  @apply block absolute right-0 w-[100px] h-full opacity-100 rotate-3 translate-x-0 -translate-y-1;
}

但现在只剩下box-shadow了。有没有什么方法可以将彩色box-shadow

我看到this answer建议它可以在drop-shadow和filter上工作。可以吗？

如果是这样，那么是如何实现的呢？

html

css

tailwind-css

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-25 20:30:36

您想在以后重用它吗？如果不是，你为什么要把它转换成顺风呢？让它留在css中。

无论如何，要创建顺风类，您需要将此阴影添加到config中，如下所示：

  // tailwind.config.js
  module.exports = {
    theme: {
      boxShadow: {
        "nprogress": "0 0 10px #29d, 0 0 5px #29d"
      }
    }
  }

像在代码中使用shadow-nprogress一样使用它。

Docs

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68515538

复制

相似问题

问在尾风CSS中使用彩色方框阴影来实现NProgress发光效果？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在尾风CSS中使用彩色方框阴影来实现NProgress发光效果？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在尾风CSS中使用彩色方框阴影来实现NProgress发光效果？
EN