改善霓虹銳化切割文字效果
[英]Improve neon sharped cut text effect
問題描述
我正在嘗試在文本上添加銳利的剪切效果。 我已經實現了這件事：
但我想實現這種背板/背景銳化切割文本效果：
我的代碼：
.wrapper { background-color: #000; } .previewText { text-shadow: var(--text-color) 0px 0px 10px, var(--text-color) 0px 0px 25px, #000 1px 1px 1px; --text-color: #fff; } .previewText svg { position: absolute; left: 0; top: 0; z-index: 0; }
<div class="wrapper"> <div class="preview-items--item__text previewText cut-sharp" style="font-family: Amarila; font-size: 50px; --text-color:#30cbfd;"> <div style="filter: url("#cutSharpru5i2bye4iml4tvt6s0");"> <p>work <span style="font-family: PoiretOne;">HARD</span></p> <p><span style="font-family: PoiretOne;">dream</span> big</p> </div> <svg viewBox="0 0 100 100"> <filter id="cutSharpru5i2bye4iml4tvt6s0"> <feMorphology in="SourceGraphic" result="dilated" operator="dilate" radius="2.5"></feMorphology> <feFlood flood-color="#fff" flood-opacity="0.12" result="neon"></feFlood> <feComposite in="neon" in2="dilated" operator="in" result="cutSharpru5i2bye4iml4tvt6s0"></feComposite> <feMerge> <feMergeNode in="cutSharpru5i2bye4iml4tvt6s0"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode> </feMerge> </filter> </svg> </div> </div>
有人可以幫助我實現如圖 #2 所示的目標嗎？ 我被困住了。 我嘗試了很多，但我只是用svg得到了一點筆觸，筆觸應該在文本的完整背景中，如圖 #2 所示。
1 個解決方案
解決方案1
3 2022-06-25 19:29:48
您需要使用光照圖元來獲得那些邊緣光照效果。 光照原語是有缺陷的，當您嘗試在 Safari 上運行它們時，通常會觸發某種奇怪的跨瀏覽器錯誤。 甚至 Chrome 也遇到了問題，因為它們沒有很好地調試。
提供的警告 - 這是你如何完成這樣的事情的基本結構。 這是一個艱苦的試錯過程，以找出照明效果屬性的正確組合以獲得您想要的結果 - 所以這是在正確的附近，但我不會聲稱這是專業品質。
對於這種效果，我可能會推薦 Photoshop 而不是 SVG 濾鏡。
body { background-color: black; } .meow { font-family: 'Meow Script', cursive; font-size: 11pt; font-weight: light; fill: #faf; stroke: none; } .comfort { font-family: 'Comfortaa', sans-serif; font-size: 11pt; font-weight: light; fill: #FAF; stroke: none; }
<head> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Meow+Script&display=swap" rel="stylesheet"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet"> </head> <body> <svg width="800px" height="600px" viewBox="0 0 100 100"> <defs> <filter id="shiny-filter" height="200%" color-interpolation-filters="sRGB"> <!-- Part 1 neon text --> <feMorphology operator="dilate" radius="0.25" result="dilated-original"/> <feGaussianBlur stdDeviation="0.75"/> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 1.1 0" result="glow"/> <feComposite operator="over" in2='SourceGraphic' result="neon-text"/> <!-- Part 2 drop shadow --> <feGaussianBlur stdDeviation="0.5" in="dilated-original" result="blurred-dil-orig"/> <feFlood flood-color="#111"/> <feComposite operator="in" in2="blurred-dil-orig"/> <feOffset dy="4" result="drop-shadow-y"/> <feComposite operator="over" in="neon-text" in2="drop-shadow-y" result="neon-text-and-shadow"/> <!-- Part 3 backplate --> <feMorphology radius="2" operator="dilate" in="dilated-original" result="super-dilated-original"/> <feFlood x="9.5" y="4" width="72" height="30" flood-color="#111"/> <feComposite operator="over" in="super-dilated-original"/> <feGaussianBlur stdDeviation="1" result="combined-backdrop"/> <feFlood flood-color="#222"/> <feComposite operator="in" in2="combined-backdrop" result="combined-backdrop-grey"/> <!-- Part 4 lighting --> <feSpecularLighting in="combined-backdrop-grey" result="topOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2"> <fePointLight x="50" y="-150" z="10"/> </feSpecularLighting> <feSpecularLighting in="combined-backdrop-grey" result="leftOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2" > <fePointLight x="-150" y="50" z="10"/> </feSpecularLighting> <feSpecularLighting in="combined-backdrop-grey" result="rightOut" specularExponent="15" lighting-color="#FcF" surfaceScale="2" > <fePointLight x="150" y="50" z="10"/> </feSpecularLighting> <feMerge> <feMergeNode in="combined-backdrop-grey"/> <feMergeNode in="neon-text-and-shadow"/> <feMergeNode in="leftOut"/> <feMergeNode in="topOut"/> <feMergeNode in="rightOut"/> </feMerge> </filter> </defs> <g transform="translate(0 3)" filter="url(#shiny-filter)"> <text class="meow" x="10" y="11">work</text> <text class="comfort" x="38" y="14">HARD</text> <text class="comfort" x="9" y="33">DREAM</text> <text class="meow" x="73" y="33">big</text> </g> </svg>
切割鋒利的霓虹燈文本和 svg 效果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.