javascript - 猫头鹰轮播中矢量路径的常用颜色渐变动画
问题描述
我正在做一个网站，其中有两个部分
- 渐变动画背景和元素是白色的
- 白色背景和元素在动画渐变中。
这是渐变后退动画片段
我已经完成了第一部分，但正在努力处理白色背景的第二部分。我想要一个带有 SVG 幻灯片项目的滑动轮播（所有 SVG 都必须有通用的渐变动画，就像上面的 codepen 中的渐变动画一样）。
// owl
$('.owl-carousel').owlCarousel({
loop: true,
margin: 10,
nav: true,
responsive: {
0: {
items: 1
},
600: {
items: 3
},
1000: {
items: 4
}
}
})<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="owl-carousel owl-theme">
<!-- Blob 1 -->
<div class="owl-blob">
<svg width="203" height="205" viewBox="0 0 203 205" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M123.67 194.321C97.7851 200.934 64.4856 189.808 39.8317 166.724C15.0959 143.761 -1.03347 108.636 7.10694 82.5688C15.1653 56.6224 47.6575 39.4916 78.0682 24.1252C108.6 8.84091 137.214 -4.92077 158.453 2.60928C179.692 10.1393 193.556 38.9611 197.136 65.2166C200.716 91.472 194.012 115.161 181.263 139.16C168.514 163.158 149.758 187.67 123.67 194.321Z" fill="#EE7752"/>
</g>
<defs>
<filter id="filter0_d" x="0.978512" y="0.486328" width="201.116" height="203.723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</div>
<!-- Blob 2 -->
<div class="owl-blob">
<svg width="203" height="205" viewBox="0 0 203 205" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M123.67 194.321C97.7851 200.934 64.4856 189.808 39.8317 166.724C15.0959 143.761 -1.03347 108.636 7.10694 82.5688C15.1653 56.6224 47.6575 39.4916 78.0682 24.1252C108.6 8.84091 137.214 -4.92077 158.453 2.60928C179.692 10.1393 193.556 38.9611 197.136 65.2166C200.716 91.472 194.012 115.161 181.263 139.16C168.514 163.158 149.758 187.67 123.67 194.321Z" fill="#EE7752"/>
</g>
<defs>
<linearGradient id="skyGradient" x1="100%" y1="100%" gradientTransform="rotate(45)>
<stop offset=" 0%" stop-color="#e73c7e">
<animate attributeName="stop-color"
values="#ee7752;#e73c7e;#;#23d5ab;#23d5ab;23a6d5;#e73c7e;#ee7752" dur="14s"
repeatCount="indefinite" />
</stop>
<stop offset="100%" stop-color="#e73c7e">
<animate attributeName="stop-color"
values="#ee7752;#e73c7e;#;#23d5ab;#23d5ab;23a6d5;#e73c7e;#ee7752" dur="14s"
repeatCount="indefinite" />
<animate attributeName="offset" values=".95;.80;.60;.40;.20;0;.20;.40;.60;.80;.95"
dur="14s" repeatCount="indefinite" />
</stop>
</linearGradient>
<filter id="filter0_d" x="0.978512" y="0.486328" width="201.116" height="203.723" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
</defs>
</svg>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>以上 svg 中的渐变动画我们不满意，我们需要相同的动画颜色，并且与此 codepen 匹配