css - 可以将 CSS3 动画文本阴影样式应用于 SVG?
问题描述
我发现了这个很酷的霓虹 CSS 效果,我希望能够将它应用到 SVG。不幸的是,它正在使用text-shadow
,所以我想知道是否有办法将相同的样式应用于我的 SVG。我尝试将 from 更改text-shadow
为box-shadow
,但这仅适用于 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" />
解决方案
您需要使用 afilter
来使其与 SVG 一起工作。然后使用普通的 CSS 过渡或@keyframes 对其进行动画处理。
这是悬停动画的示例。
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>
推荐阅读
- serialization - Java:Jackson 序列化正在创建 2 个节点
- python - Celery 忽略 retry_backoff,而是重复重试 180 秒
- javascript - 三角形/倾斜菜单样式?
- neo4j - Neo4j - 不存在的地方
- python-3.x - 尝试安装 YouCompleteMe 时未找到 setup.py
- triggers - 当两个自定义指标之间的百分比差异超过指定的百分比阈值时创建 Datadog 警报
- c# - 如何用括号将字典类型包装在c#中
- json - 在kotlin中解析json?
- ansible - 只收集ansible中的二进制文件
- ios - 找不到领域文件的加密密钥