我有一個SVG標志，我想用我制作的波動畫填充。
此刻，我只能用CSS填充一個圓圈。
迄今取得的進展:https://codepen.io/luizgununes/pen/rNqKrVx
.water {
position: absolute;
left: 0;
top: 0;
z-index:2;
width: 100%;
height: 100%;
transform:translate(0,100%);
background:#FFCA00;
transition: all .3s;
&_wave {
width: 200%;
position: absolute;
bottom: 100%;
&_front {
left: 0;
fill: #FFCA00;
margin-bottom: -1px;
animation: wave-front .7s infinite linear;
}
}
}有辦法做到這一點嗎？
編輯: 我有另一個關于我想要什么的例子，但是我不知道如何在這個例子中添加波:https://codepen.io/luizgununes/pen/mdzKjrj
這有點棘手，基于你現在的做法(我覺得在定位方面還可以改進)，我可以用這樣的手法思考，不確定是不是你想要的，但是足夠有創意了
如果你想要更復雜的東西，我建議你生成一個html5視頻并用隱藏控件自動播放它(就像舊的google的gmail動畫登錄)或者用2d畫布或完整的svg生成一些東西(大量代碼和外部庫)
var cnt = document.getElementById("count");
var water = document.getElementById("water");
var percent = cnt.innerText;
var interval;
/** added code */
var logo2Container = document.querySelector(".logo2-container");
var logo2Gradient = document.querySelector(".logo2-gradient");
var height = 280;
/** end added code */
interval = setInterval(function () {
percent++;
cnt.innerHTML = percent;
water.style.transform = 'translate(0' + ',' + (100 - percent) + '%)';
/** added code */
logo2Container.style.height = 280 / 100 * percent + 'px';
logo2Gradient.style.height = 280 / 100 * percent + 'px';
/** end added code */
if (percent == 100) {
clearInterval(interval);
}
}, 60);/** edits */
.logo2-container {
overflow: hidden;
/** height: 280px; */
width: 280px;
bottom: 0;
right: 0;
position: absolute;
z-index: 2;
transition: all .3s;
}
.logo2-gradient {
position: absolute;
overflow: hidden;
bottom: 0;
height: 40px;
width: 100%;
right: 0;
z-index: 3;
background: linear-gradient(180deg, rgba(255, 201, 0, 1) 0%, rgba(255, 201, 0, 0.8) 20px, rgba(255, 201, 0, 0) 40px);
}
.logo2 {
height: 280px;
width: 280px;
position: absolute;
/** bottom must be in px */
bottom: -70px;
z-index: 3;
right: 10%;
}
/** end edits */
body {
background: white;
}
.box {
height: 280px;
width: 280px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 100%;
overflow: hidden;
}
.box .logo {
overflow: hidden;
height: 280px;
width: 280px;
top: 25%;
right: 10%;
position: absolute;
}
.box .percentNum {
display: none;
}
.box .water {
position: absolute;
left: 0;
top: 0;
z-index: 2;
width: 100%;
height: 100%;
transform: translate(0, 100%);
background: #FFCA00;
transition: all .3s;
}
.box .water_wave {
width: 200%;
position: absolute;
bottom: 100%;
}
.box .water_wave_front {
left: 0;
fill: #FFCA00;
margin-bottom: -1px;
animation: wave-front .7s infinite linear;
}
@keyframes wave-front {
100% {
transform: translate(-50%, 0);
}
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
style="display: none;">
<symbol id="wave">
<path
d="M420,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C514,6.5,518,4.7,528.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H420z">
</path>
<path
d="M420,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C326,6.5,322,4.7,311.5,2.7C304.3,1.4,293.6-0.1,280,0c0,0,0,0,0,0v20H420z">
</path>
<path
d="M140,20c21.5-0.4,38.8-2.5,51.1-4.5c13.4-2.2,26.5-5.2,27.3-5.4C234,6.5,238,4.7,248.5,2.7c7.1-1.3,17.9-2.8,31.5-2.7c0,0,0,0,0,0v20H140z">
</path>
<path
d="M140,20c-21.5-0.4-38.8-2.5-51.1-4.5c-13.4-2.2-26.5-5.2-27.3-5.4C46,6.5,42,4.7,31.5,2.7C24.3,1.4,13.6-0.1,0,0c0,0,0,0,0,0l0,20H140z">
</path>
</symbol>
</svg>
<div class="box">
<svg class="logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px">
<path class="cls-1"
d="m221.55,126.93l-44.23-11.85c-6.9,2.85-14.2,4.29-21.73,4.29-31.51,0-57.15-25.63-57.15-57.15S124.08,5.07,155.59,5.07s57.14,25.64,57.14,57.15c0,6.62-1.12,13.1-3.35,19.3l12.17,45.41Zm-45.45-26.72l25.58,6.85-7.07-26.39.89-2.19c2.11-5.18,3.18-10.65,3.18-16.26,0-23.77-19.33-43.1-43.1-43.1s-43.1,19.33-43.1,43.1,19.34,43.1,43.1,43.1c6.35,0,12.47-1.35,18.19-4.03l2.32-1.08Z" />
<path class="cls-1"
d="m133.09,84.62c-6.08-6.08-9.43-14.17-9.43-22.77s3.35-16.68,9.43-22.77c6.08-6.08,14.17-9.43,22.77-9.43s16.68,3.35,22.76,9.43l-7.45,7.45c-4.09-4.09-9.53-6.35-15.32-6.35s-11.23,2.25-15.32,6.35c-4.09,4.09-6.35,9.53-6.35,15.32s2.25,11.23,6.35,15.32l-7.45,7.45Z" />
<path class="cls-1"
d="m144.33,72.84c-3.02-3.01-4.68-7.02-4.68-11.29s1.66-8.27,4.68-11.29c3.01-3.02,7.02-4.68,11.29-4.68s8.27,1.66,11.29,4.68l-7.45,7.45c-2.05-2.05-5.62-2.05-7.67,0-1.03,1.02-1.59,2.39-1.59,3.84s.57,2.81,1.59,3.84l-7.45,7.45Z" />
<style>
.cls-1 {
fill: #e1e4e8;
}
</style>
</svg>
<div class="percent">
<div class="percentNum" id="count">0</div>
</div>
<div id="water" class="water">
<svg viewBox="0 0 560 20" class="water_wave water_wave_front">
<use xlink:href="#wave"></use>
</svg>
</div>
<div class="logo2-container">
<svg class="logo2" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<path class="cls-1"
d="m221.55,126.93l-44.23-11.85c-6.9,2.85-14.2,4.29-21.73,4.29-31.51,0-57.15-25.63-57.15-57.15S124.08,5.07,155.59,5.07s57.14,25.64,57.14,57.15c0,6.62-1.12,13.1-3.35,19.3l12.17,45.41Zm-45.45-26.72l25.58,6.85-7.07-26.39.89-2.19c2.11-5.18,3.18-10.65,3.18-16.26,0-23.77-19.33-43.1-43.1-43.1s-43.1,19.33-43.1,43.1,19.34,43.1,43.1,43.1c6.35,0,12.47-1.35,18.19-4.03l2.32-1.08Z" />
<path class="cls-1"
d="m133.09,84.62c-6.08-6.08-9.43-14.17-9.43-22.77s3.35-16.68,9.43-22.77c6.08-6.08,14.17-9.43,22.77-9.43s16.68,3.35,22.76,9.43l-7.45,7.45c-4.09-4.09-9.53-6.35-15.32-6.35s-11.23,2.25-15.32,6.35c-4.09,4.09-6.35,9.53-6.35,15.32s2.25,11.23,6.35,15.32l-7.45,7.45Z" />
<path class="cls-1"
d="m144.33,72.84c-3.02-3.01-4.68-7.02-4.68-11.29s1.66-8.27,4.68-11.29c3.01-3.02,7.02-4.68,11.29-4.68s8.27,1.66,11.29,4.68l-7.45,7.45c-2.05-2.05-5.62-2.05-7.67,0-1.03,1.02-1.59,2.39-1.59,3.84s.57,2.81,1.59,3.84l-7.45,7.45Z" />
<style>
.logo2-container .cls-1 {
fill: #ffffff;
}
</style>
</svg>
<div class="logo2-gradient"></div>
</div>
</div>上一篇電子郵件簽名背景圖像
下一篇vue 請求api 同步