css - 如何为图案填充添加背景颜色?
问题描述
如何转换此代码,以便具有 id 的路径最初#wires
具有颜色#000
,然后由图案和关键帧着色,而不是完全没有颜色?所以基本上星星应该是黑色的,渐变动画会爬上星星。我如何实现这一目标?
这是受到https://stackoverflow.com/a/42032657/5586359的启发。
.fill {
animation-name: fillAction;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.26, .64, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-duration: 0.5s;
width: 100%;
height: 50%;
}
#wires {
fill: url(#waveGradient);
}
svg {
width: 100%;
height: auto;
}
@keyframes fillAction {
0% {
transform: translate(0, 50%);
}
100% {
transform: translate(0, -1.6%);
}
}
@keyframes waveAction {
0% {
transform: translate(-0%, 0);
}
10% {
transform: translate(-5%, 0);
}
20% {
transform: translate(-10%, 0);
}
30% {
transform: translate(-15%, 0);
}
40% {
transform: translate(-20%, 0);
}
50% {
transform: translate(-15%, 0);
}
60% {
transform: translate(-10%, 0);
}
70% {
transform: translate(-5%, 0)
}
100% {
transform: translate(0%, 0);
}
}
<div class="banner">
<?xml version="1.0" standalone="no"?>
<!-- Generator: Gravit.io -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 250 250" width="250" height="250">
<defs>
<clipPath id="_clipPath_kDqJpeywA1tWpdDxczhcHinYaTsaw8EY"><rect width="250" height="250"/>
</clipPath>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#333291"/>
<stop offset="30%" stop-color="purple"/>
<stop offset="100%" stop-color="#fb5b5d" stop-opacity="100" />
</linearGradient>
<pattern id='waveGradient' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
<g class="fill">
<path fill="url(#gradient)" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</g>
</pattern>
</defs>
<g clip-path="url(#_clipPath_kDqJpeywA1tWpdDxczhcHinYaTsaw8EY)">
<path id="wires" d="M12.015.624L9.19 9.293H0l7.445 5.384-2.819 8.673L12 17.986l7.422 5.393-2.835-8.713L24 9.292h-9.162L12.015.622v.002z"/>
</g>
</svg>
</div>
解决方案
一个想法是复制星星的路径,然后用你想要的颜色填充它。两者都将被放置在彼此之上,您将拥有您想要的视觉效果
.fill {
animation-name: fillAction;
animation-iteration-count: infinite;
animation-timing-function: cubic-bezier(.26, .64, .8, .4);
animation-duration: 4s;
animation-fill-mode: forwards;
}
#waveShape {
animation-name: waveAction;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
animation-duration: 0.5s;
width: 100%;
height: 50%;
}
#wires {
fill: url(#waveGradient);
}
#empty {
fill:#000;
}
svg {
width: 100%;
height: auto;
}
@keyframes fillAction {
0% {
transform: translate(0, 50%);
}
100% {
transform: translate(0, -1.6%);
}
}
@keyframes waveAction {
0% {
transform: translate(-0%, 0);
}
10% {
transform: translate(-5%, 0);
}
20% {
transform: translate(-10%, 0);
}
30% {
transform: translate(-15%, 0);
}
40% {
transform: translate(-20%, 0);
}
50% {
transform: translate(-15%, 0);
}
60% {
transform: translate(-10%, 0);
}
70% {
transform: translate(-5%, 0)
}
100% {
transform: translate(0%, 0);
}
}
<div class="banner">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 250 250" width="250" height="250">
<defs>
<linearGradient id="gradient">
<stop offset="0%" stop-color="#333291"/>
<stop offset="30%" stop-color="purple"/>
<stop offset="100%" stop-color="#fb5b5d" stop-opacity="100" />
</linearGradient>
<pattern id='waveGradient' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
<g class="fill">
<path fill="url(#gradient)" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
</g>
</pattern>
</defs>
<g >
<path id="empty" d="M12.015.624L9.19 9.293H0l7.445 5.384-2.819 8.673L12 17.986l7.422 5.393-2.835-8.713L24 9.292h-9.162L12.015.622v.002z"/>
<path id="wires" d="M12.015.624L9.19 9.293H0l7.445 5.384-2.819 8.673L12 17.986l7.422 5.393-2.835-8.713L24 9.292h-9.162L12.015.622v.002z"/>
</g>
</svg>
</div>
推荐阅读
- c++ - 如何维护类成员的顺序并且仍然有一个工作的构造函数
- symfony - 是否有适当的方法来检查是否已使用 FosUserBundle 使用令牌?
- pyspark - pyspark中的左外连接后删除功能不起作用
- excel - VBA使用msoFolderPicker获取目录路径,如何在另一段代码中使用该值
- powerbi - 在 Power BI 中使用联接的不同行数
- raku - 如何通过克隆填充 Callable 属性?
- javascript - 如何让 webpack 生成包含所需块的单个 JS 文件?
- sql - 从多个表中选择(由另一个选择传递)
- apache - mod_security 基于发布数据的关闭规则
- asynchronous - 等待而不将函数声明为异步