CSS:发光文本,发光非常宽和高

2024-02-23

几天以来我一直在研究 box-shadow 和 text-shadow。我正在努力获得以下效果。我想要从文字中散发出光芒<a>一度盘旋。很简单,这应该很容易,因为我探索了使用文本阴影。好的,但它适用于小发光,我的意思是,一旦发光较大,由于其高度模糊,您就看不到发光。必须有一个解决方案。一张图片比 100 个单词更能解释。

这就是我想要获得的:

LINK:

HOVER:

这是我用过的代码

#projectBox a:LINK{
    background-image: url('../_img/showcase/projectTabs/link.png');
}

#projectBox a:HOVER{
    background-image: url('../_img/showcase/projectTabs/link.png');
    color:#fa0000;
    text-shadow: 0 0 80px white;
}

我知道我可以再次使用背景图像进行悬停,但我想避免这种情况。问题是,如果添加更多模糊,它就不会再出现,因为它太模糊了。其他两个属性没有太大帮助,因为我希望发光从中间开始。

让我们一起解决这个问题,看看如何使用 CSS 实现宽而高的发光效果。


您可以添加多个文本阴影:

text-shadow: 
-3px 0px 10px #FFF,
3px 0px 10px #FFF,
0px 0px 10px #FFF,
-3px -3px 10px #FFF,
3px -3px 10px #FFF,
0px -3px 10px #FFF,
-3px 3px 10px #FFF,
3px 3px 10px #FFF,
0px 3px 10px #FFF;

这会给你一个更宽、更饱满的光芒,因为文本周围有 9 个独立的阴影。调整值以获得您想要的强度。

(这些值是随机猜测 - 未经测试,因为我在手机上):)

http://jsfiddle.net/pzMmC/ http://jsfiddle.net/pzMmC/ -

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

CSS:发光文本,发光非常宽和高 的相关文章

  • 背景图像上的透明导航栏

    我试图找出让我的英雄 背景图像位于透明 Bootstrap 4 导航栏后面的最佳方法 一些建议是将背景图像应用到页面的 这是可行的 但我不希望应用程序内的所有其他静态页面上都有背景图像 只有登陆页面 Rails 应用程序 我尝试在导航栏和
  • 向 jQuery 函数 Interval 添加动画

    我的问题是如何向倒计时器添加一些动画 我的意思是每次调用 Function Interval 时都需要添加一些动画 如下所示 youtube 视频链接 https www youtube com watch v A9fnvhcWPRo 第二
  • 使用 jQuery / JavaScript 将 Alpha 通道添加到背景颜色

    我有一个 jQuery 函数 它添加了一个Alpha通道到一个背景颜色当事件发生时 这是我的jsFiddle http jsfiddle net liormb SxQt8 1 CSS div background color rgb 100
  • 滚动效果:先慢后快

    我正在尝试创建滚动效果 当onclick事件被触发 我想要那个div1滚动到dev2 一开始应该慢 然后快 这是一个使用此效果的网站 http community saucony com kinvara3 http community sa
  • 跨浏览器方法使子 div 适合其父级的宽度

    我正在寻找适合孩子的解决方案div进入它的父母width 我在这里看到的大多数解决方案不跨浏览器兼容 eg display table cell IE 不支持 lt 8 解决方案就是不声明width 100 默认为width auto 对于
  • CSS3输入元素的圆角,没有js/图像

    谁可以为输入元素制作圆角 我需要一种不使用 javascript 和图像的方法 Added
  • 带圆角边框的 Div

    我不明白获得 div 的更大圆角底部边框的公式 以及是否有更简单的方法在 Bootstrap 中实现它 现在是这样的 以及我想如何开发它 header background color blue height 40px width 90px
  • 向上/向下滚动到带有固定按钮的部分

    我想构建一个用于向上 向下滚动到页面部分标签的脚本 我的源代码如下所示 HTML div class move div class previous UP div div class next DOWN div div section Fi
  • 如何修复连接的可排序对象位置错误的可拖动助手(部分由浮动/相对定位的父元素引起)?

    Preface 我遇到一个问题 当使用放置在浮动 相对定位的父元素中的可拖动元素 可排序元素时 可拖动帮助器偏移不正确 浮动父元素是 Bootstrap 列 其中多个可排序列表放置在一列中 可拖动列表放置在另一列中 Example 这是一个
  • 与 body 相比,将 css 规则应用于 html 有什么区别?

    我看不出以下之间的区别 html background f1f1f1 and body background f1f1f1 有什么解释吗 没有真正的区别 如果你只是谈论在哪里申请background 否则BoltClock 对另一个问题的回
  • Angular4 - 滚动到锚点

    我正在尝试对同一页面上的锚元素进行简单的滚动 基本上 用户点击 尝试 按钮 它就会滚动到页面下方 ID 为 登录 的区域 现在 它正在与一个基本的id login a href login a 但它正在跳转到该部分 理想情况下 我希望它滚动
  • 如何使用 Bourbon Neat Framework 实现移动优先

    我一直在使用 bourbon clean 来进行桌面优先布局 效果很好 不过 我想做一个移动优先版本 从移动开始 然后逐步向上 默认网格为 12 列 对于移动设备 我通常使用 4 列网格 我尝试将网格更改为 4 列 然后扩展到 12 列 但
  • 使 css nth-child() 只影响可见

    有没有办法用这个CSS只影响可见元素 table grid tr alt nth child odd background ebeff4 table grid tr alt nth child even background ffffff
  • 粘表行

    我正在尝试实现一个像 iOS 那样的日历列表视图 基本上 我现在正在做的就是循环遍历我的事件数组 如果是新日期 则打印日期标题 否则打印日历事件 我想让日期标题行保持粘性 直到它们 滚动走 我怎样才能做到这一点 我看到很多关于粘性标题的示例
  • 如何在 Mac 的任何 webkit 中隐藏父圆角的画布内容?

    我有一个父母div带有圆角 其中包含canvas div div
  • 如何在css3中制作曲线风格的菜单?

    是否可以用css3制作曲线 圆弧样式的菜单 我可以使用canvas或HTML5中的其他东西来实现这一点吗 预先感谢 洛根 不幸的是 我不知道有什么优雅的解决方案 特别是当涉及到菜单项时 但弧线本身应该可以在纯 css 和几个 html 元素
  • @font-face 字体在 Mac 的 Safari 和 Chrome 中显示模糊

    I m using two special fonts on my website for headings and subtitles They are working fine on a PC in IE Firefox and Chr
  • 加载背景图像的图像不显示

    我真的很困惑 我正在尝试创建一个带有图标和一些按钮的登陆页面 但我无法设法使我正在使用的背景图像显示出来 即使它是根据 Chrome 的开发工具包加载的 我只有这些行 索引 html div class row div class tryh
  • 如何在不设置动画的情况下突然更改 CSS 动画中的属性

    这是我试图弄清楚的 但没有使用 51 关键帧作为实现更改的黑客方法transform origin 这里有一个小提琴演示 http jsfiddle net p7pswnpq keyframes spin 0 transform origi
  • 媒体查询:如何定位桌面、平板电脑和移动设备?

    我一直在对媒体查询进行一些研究 但我仍然不太明白如何定位特定大小的设备 我希望能够针对台式机 平板电脑和移动设备 我知道会存在一些差异 但如果有一个可用于针对这些设备的通用系统 那就太好了 我发现的一些例子 Mobile only scre

随机推荐

  • 找不到“RdlCompile”任务

    我正在尝试使用 rldc 文件进行编译和项目 但出现以下两个错误之一 无法从程序集 Microsoft ReportViewer Common Version 10 0 0 0 Culture neutral PublicKeyToken
  • Qt:使TableView的宽度适合内容的宽度

    我有一个窗口 其中包含QTableView which 栏目根据内容进行调整并且是宽度固定 The QTableView嵌套在一个QWidget依次嵌套在QScrollArea依次嵌套在tabbed QMdiArea哪一个是centralW
  • 如何在 GWT 中解析大数据 (XML)

    在我的 GWT 应用程序中 我从 REST 服务器检索 XML 数据 我正在使用 Piriti XML 解析器https code google com p piriti wiki Xml https code google com p p
  • 派生类型不会发布给 MassTransit 中的消费者

    我在发布派生类型的通用消息以及使用 MassTransit v2 8 0 调用处理程序时遇到问题 如果我发布一条类型的消息HtmlBlockNewMessage 消费者永远不会被调用 如果我发布一个ServiceBusMessage反对并改
  • 如何在 Xcode 5 中自动增加内部版本号[重复]

    这个问题在这里已经有答案了 我想知道 Xcode 5 是否提供了一个设置来自动计算项目导航器 身份 部分中 常规 下找到的内部版本号 但据我所知 您仍然需要使用 PlistBuddy 通过脚本来完成此操作 一种简单的解决方案是增加 Xcod
  • 如何在vb.net中的控件名称中连接变量整数

    现在我有一个数据库并提取该数据并将其显示为表单 我有一系列组框和单选按钮 在每个组框 groupbox1 groupbox2等 中有2个单选按钮 即rdbtn1Yes和rdbtn1No 然后它在下一个 Groupbox 中增加 1 现在我用
  • ReactNative 自定义端口支持 run-android 命令,McAfee 解决方法

    我正在尝试为 Windows 配置 React Native 以进行 Android 应用程序开发 但我无法使用端口 8081 因为我的笔记本电脑上的 McAfee 代理使用该端口 我能够在不同的端口 8090 上启动节点js服务器 rea
  • Unity 中的单例每次调用上下文(Web 请求)

    几天前 我遇到了 ASP Net 线程的问题 我希望每个网络请求都有一个单例对象 我实际上需要这个来完成我的工作单位 我想为每个 Web 请求实例化一个工作单元 以便身份映射在整个请求过程中都有效 这样我就可以使用 IoC 将我自己的 IU
  • 线性排序算法

    我是研究算法的新手 我也不是计算机科学毕业生 然而 在阅读线性排序非比较算法时 我可以理解基数排序是计数排序的扩展 我不清楚的是计数排序的局限性 当计数排序似乎可以满足我需要避免 O n logn 比较的目的时 为什么我要选择基数排序 这确
  • AWS CDK 突然失败,Construct 无法转换为 InterfaceVpcEndpoint 类

    截至昨天我的cdk代码开始返回错误 java lang ClassCastException 类 software constructs Construct 无法转换为类 software amazon awscdk services ec
  • 当尝试运行以生成报告并在 Maven 项目中发送电子邮件时,缺少必需的类:org/codehaus/gmaven/mojo/GroovyMojo

    我有 Maven JUnit 项目 它可以成功编译 构建和测试 另外 当我做mvn site所有测试均成功运行并生成surefire report target site 目录 现在 我需要将此报告通过电子邮件发送给指定的收件人 这是我的
  • Sinatra 不会在 Chrome 上通过重定向保持会话

    Sinatra 不会通过 Chrome 上的重定向来保留我的会话 它正在创建一个全新的会话 而我正在丢失以前的所有会话数据 举个例子 类似于西纳特拉文档 http www sinatrarb com intro Browser 20Redi
  • Javascript - 需要在 setInterval 函数之外使用clearInterval

    基本上 我拥有的是函数内的 setInterval 我想做的是 从外部控制它的行为 这就是我所拥有的 function wheee var i 1 slideee setInterval function sliderContent sty
  • 如何将字节数组转换为 NSString

    我正在从 TCP IP 流读取数据 并成功从预先存在的服务器接收字节数组 我现在正在尝试找到一种方法将该数组转换为NSString 我找到了几个例子 但很难得到我想要的结果 NSData data NSMutableData alloc i
  • npm本地安装

    过去 当我使用 npm gt 1 0 安装软件包时 它们会在本地安装 但现在不再了 我的设置 首先我使用nvm https github com creationix nvm安装node js 我的操作系统 alfred alfred la
  • 检测存在哪些 Unicode 字形?

    JavaScript CSS web 中有没有办法检测系统是否具有某个 Unicode 字符的有效字形 例如 我想检测某种语言中的某个字符是否显示为方框 因为用户没有显示这些 Unicode 点的字体 或者他们是否确实会看到这些字符 这里描
  • 属性与实例变量[重复]

    这个问题在这里已经有答案了 可能的重复 Objective c cocoa cocoa touch 中的 实例变量 和 属性 之间有区别吗 https stackoverflow com questions 843632 is there
  • 如何为 asp.net 身份创建安全标记值 (IUserSecurityStampStore)

    在我的 MVC 5 应用程序中 我必须手动创建安全标记值 身份团队当前的实现似乎使用了指南 Guid NewGuid ToString D 我自己创建一个新的 Guid 来用作新的安全标记值是否安全 或者这是否会在将来的 ASP NET 身
  • Mongo PHP 驱动程序 1.2.10 与 MAMP

    我正在尝试让最新的 Mongo 驱动程序与 OS X 10 5 8 上的 MAMP 1 9 6 一起使用 我从源代码成功构建了它 因为似乎没有预编译版本 将其包含到正确的目录中并重新启动了 apache 但 PHP 无法识别该扩展名 我之前
  • CSS:发光文本,发光非常宽和高

    几天以来我一直在研究 box shadow 和 text shadow 我正在努力获得以下效果 我想要从文字中散发出光芒 a 一度盘旋 很简单 这应该很容易 因为我探索了使用文本阴影 好的 但它适用于小发光 我的意思是 一旦发光较大 由于其