简体   繁体   中英

Possible to apply CSS3 animated text-shadow styling to an SVG?

I found this cool neon CSS effect and I was hoping to be able to apply it to an SVG. Unfortunately, it's using text-shadow so I was wondering if there would be a way to apply the same sort of style to my SVG. I tried just changing from text-shadow to box-shadow , but that only applies to the outside borders of the SVG.

 body { background-color: #222222; background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px; } h2 { font-family:sans-serif; font-size:30px; color: #FFDD1B; -webkit-animation: neon 1.5s ease-in-out infinite alternate; animation: neon 1.5s ease-in-out infinite alternate; -webkit-transition: all 0.5s; transition: all 0.5s; } img { width:150px; -webkit-animation: neonSVG 1.5s ease-in-out infinite alternate; animation: neonSVG 1.5s ease-in-out infinite alternate; -webkit-transition: all 0.5s; transition: all 0.5s; } body { background-color: #222222; background: repeating-linear-gradient(45deg, #2b2b2b 0%, #2b2b2b 10%, #222222 0%, #222222 50%) 0 / 15px 15px; } h2 { font-family:sans-serif; font-size:30px; color: #FFDD1B; } img { width:150px; } @keyframes neon { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @-webkit-keyframes neon { from { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @keyframes neonSVG { from { box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } @-webkit-keyframes neonSVG { from { box-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #FFDD1B, 0 0 70px #FFDD1B, 0 0 80px #FFDD1B, 0 0 100px #FFDD1B, 0 0 150px #FFDD1B; } to { box-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #FFDD1B, 0 0 35px #FFDD1B, 0 0 40px #FFDD1B, 0 0 50px #FFDD1B, 0 0 75px #FFDD1B; } } 
 <h2>This is some text</h2> <img src="https://camo.githubusercontent.com/133ab8b9b686378b2f2c70b215b369ec4d24c8a9/68747470733a2f2f63646e2e737667706f726e2e636f6d2f6c6f676f732f616479656e2e737667" /> 

You need to use a filter to make that work with an SVG. Then you animate it with normal CSS transition or @keyframes.

Here's an example with animation on hover.

 svg { filter: drop-shadow(12px 12px 7px rgba(0,0,0,0.5)); transition: all 0.25s ease-in-out; } svg:hover { filter: drop-shadow(5px 5px 3px rgba(67,237,82,0.9)); } 
 <?xml version="1.0" encoding="UTF-8"?> <svg width="180px" height="49px" viewBox="0 0 180 49" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="svgText" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="Lato-Black, Lato" font-size="40" font-weight="700" letter-spacing="-0.333333343"> <text id="SVG-Text" fill="#A5A5A7"> <tspan x="8" y="40">SVG Text</tspan> </text> </g> </svg> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM