Подскажите, пожалуйста, как лучше и правильнее реализовать подобную анимацию заливки?
Нужно, чтобы цвет заливал постепенно снизу вверх или наоборот.
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуПодскажите, пожалуйста, как лучше и правильнее реализовать подобную анимацию заливки?
Нужно, чтобы цвет заливал постепенно снизу вверх или наоборот.
Надо смотреть от картинки... если я правильно понял идею, что это прелоадер, то можно так.
body {
margin: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
}
.loader {
position: relative;
width: 80vh;
height: 80vh;
clip-path: url(#myClip);
border: 1px solid #000;
}
.loader::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateY(100%);
background-color: orange;
animation: moveColor 1s linear 1s;
animation-fill-mode: forwards;
z-index: 2;
}
@keyframes moveColor {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(0);
}
}
<div class="loader">
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140" width="0" height="0">
<defs>
<clipPath id="myClip" >
<path d="M70 5.8C34.5 5.7 5.6 34.5 5.5 70.1c-.1 35.4 28.7 64.2 64.2 64.4 35.5.1 64.4-28.7 64.4-64.3.1-35.4-28.6-64.3-64.1-64.4zm-.1 124c-33 0-59.8-26.8-59.7-59.7.1-33 26.7-59.6 59.7-59.6s59.7 26.8 59.7 59.7c-.2 33-26.8 59.6-59.7 59.6z"/><path d="M76.8 59.5c.7-.5 1.4-1.1 2-1.7 7.3-7.3 14.7-14.6 22-22 3.9-4 3.4-8.5-1.3-11.5-5.4-3.5-11.2-6-17.5-7.5-6.6-1.5-9.9 1.1-9.9 7.8V56c0 .5 0 1.1.1 1.6.5 2.5 2.6 3.3 4.6 1.9zM24.3 67.9h31.1c1 0 2.1-.2 3-.5 1.6-.6 2.1-2.1 1.2-3.6-.5-.9-1.2-1.7-2-2.5-7.3-7.4-14.7-14.8-22.1-22.1-3.9-3.9-8.4-3.3-11.4 1.3-3.5 5.4-6 11.2-7.5 17.4-1.6 6.6 1 9.9 7.7 10zM67.5 82.7c-.3-2.3-2.2-3.3-4.3-2.1-.9.5-1.6 1.2-2.4 1.9-7.3 7.3-14.7 14.6-22 22-3.9 3.9-3.4 8.5 1.3 11.5 5.3 3.5 11.1 6 17.3 7.4 6.8 1.6 10-1 10.1-7.9V86.1c.1-1.1.1-2.3 0-3.4zM116.9 72.5H84c-.8 0-1.7.1-2.4.3-1.7.5-2.4 2-1.6 3.6.6 1.1 1.4 2.1 2.3 3 3.1 3.2 6.2 6.3 9.4 9.4l12.6 12.6c3.6 3.5 7.9 3.3 10.7-.6 4.3-6.1 7.3-12.9 8.4-20.3.9-4.8-1.8-7.8-6.5-8zM81.4 61.9c-1.1 1.1-2.1 2.2-1.5 3.8.7 1.8 2.3 1.9 3.9 2h16.5c5.6 0 11.2.1 16.8 0 4.6-.1 7.3-3.5 6.4-8-1.3-7.3-4.1-14-8.4-20-2.8-4-7.1-4.4-10.6-1-7.7 7.8-15.4 15.5-23.1 23.2zM59.8 74.5c-.8-2-2.7-2-4.4-2H39.5c-5.5 0-11.1-.1-16.6 0-4.7.1-7.4 3.5-6.6 8.1 1.4 7.1 4 13.6 8.1 19.5 3.1 4.5 7.4 4.8 11.2 1 7.5-7.4 14.9-14.9 22.4-22.4 1.1-1.1 2.5-2.3 1.8-4.2zM78.4 82c-1.2-1.2-2.3-2.6-4.3-1.8-1.9.8-2 2.6-2 4.3v16.1c0 5.6-.1 11.2 0 16.8.1 4.5 3.5 7.2 8 6.4 7.2-1.3 13.8-4 19.8-8.2 4.3-3 4.6-7.3.9-11C93.4 97 85.9 89.5 78.4 82zM61.3 58.3c1.2 1.2 2.3 2.6 4.3 1.8 1.9-.8 2-2.6 2-4.3V39.7c0-5.5.1-11.1 0-16.6-.1-4.6-3.5-7.4-8-6.5-7 1.3-13.5 4-19.4 8C35.3 27.7 35 31.9 39 36c7.4 7.4 14.9 14.8 22.3 22.3z"/>
</clipPath>
</defs>
</svg>
Если я правильно поняла Вашу задачу, то вот так это можно реализовать
<svg height="200px" width="200px" version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="url(#top_bottom)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M458.059,98.97c-13.055-16.818-28.248-31.928-45.049-45.065c-43.374-33.75-97.896-53.868-157.043-53.868 C114.854,0.037,0,114.817,0,256.004c0,46.45,12.482,90.113,34.198,127.686c22.528,38.973,55.111,71.547,94.084,94.075 c37.571,21.716,81.228,34.199,127.684,34.199C397.154,511.963,512,397.116,512,256.004C512,196.849,491.892,142.327,458.059,98.97z M255.992,467.039c-116.554,0-211.043-94.498-211.043-211.051c0-116.562,94.489-211.051,211.043-211.051 c116.579,0,211.068,94.49,211.068,211.051C467.06,372.541,372.57,467.039,255.992,467.039z"></path> <path d="M235.851,295.59c-1.484-0.605-3.191-0.274-4.327,0.862l-80.391,80.382c-3.348,3.357-5.022,8.032-4.566,12.747 c0.456,4.717,3.108,8.016,6.929,11.629c0,0,12.316,12.905,30.186,20.324c17.879,7.394,35.707,6.971,35.707,6.971 c4.941,0.008,9.466-0.299,13.129-3.316c3.664-3.009,5.786-7.509,5.786-12.25l-0.008-113.678 C238.296,297.654,237.334,296.204,235.851,295.59z"></path> <path d="M276.158,216.377c1.475,0.614,3.183,0.282,4.318-0.854l80.391-80.391c3.349-3.348,5.023-8.023,4.584-12.74 c-0.464-4.716-3.124-8.023-6.946-11.629c0,0-12.301-12.914-30.179-20.315c-17.878-7.402-35.707-6.979-35.707-6.979 c-4.94-0.016-9.474,0.306-13.129,3.324c-3.656,3.009-5.778,7.51-5.778,12.242v113.686 C273.712,214.321,274.683,215.772,276.158,216.377z"></path> <path d="M216.398,272.598c-0.614-1.475-2.056-2.437-3.663-2.437H99.048c-4.749,0-9.234,2.106-12.242,5.769 c-3.016,3.663-3.472,7.874-3.331,13.137c0,0-0.423,17.821,6.978,35.699c7.41,17.878,20.324,30.186,20.324,30.186 c3.481,3.49,6.904,6.482,11.629,6.938c4.708,0.456,9.39-1.226,12.731-4.575l80.407-80.391 C216.671,275.798,217.011,274.09,216.398,272.598z"></path> <path d="M295.611,242.204c0.614,1.475,2.064,2.444,3.663,2.444h113.678c4.75,0,9.25-2.122,12.251-5.776 c3.009-3.664,3.465-7.875,3.324-13.138c0,0,0.423-17.82-6.979-35.698c-7.41-17.879-20.316-30.179-20.316-30.179 c-3.481-3.498-6.912-6.482-11.628-6.938c-4.716-0.456-9.391,1.219-12.756,4.567l-80.382,80.399 C295.329,239.004,294.99,240.712,295.611,242.204z"></path> <path d="M86.806,238.872c3.017,3.654,7.494,5.776,12.242,5.776h113.686c1.607,0,3.05-0.969,3.663-2.444 c0.621-1.492,0.282-3.2-0.862-4.327l-80.39-80.391c-3.349-3.357-8.024-5.023-12.74-4.567c-4.725,0.448-8.016,3.108-11.629,6.929 c0,0-12.914,12.308-20.316,30.187c-7.41,17.878-6.987,35.698-6.987,35.698C83.474,230.682,83.789,235.208,86.806,238.872z"></path> <path d="M425.203,275.938c-3.009-3.672-7.501-5.778-12.251-5.778H299.266c-1.591,0-3.042,0.962-3.664,2.445 c-0.613,1.484-0.274,3.192,0.862,4.318l80.382,80.391c3.357,3.348,8.032,5.031,12.748,4.575c4.724-0.456,8.023-3.124,11.636-6.945 c0,0,12.906-12.301,20.316-30.179c7.402-17.878,6.979-35.699,6.979-35.699C428.526,284.127,428.212,279.593,425.203,275.938z"></path> <path d="M231.524,215.514c1.136,1.136,2.843,1.476,4.327,0.862c1.484-0.614,2.445-2.072,2.445-3.663V99.036 c0.008-4.75-2.122-9.234-5.778-12.251c-3.663-3.025-7.858-3.464-13.129-3.324c0,0-17.828-0.423-35.707,6.979 c-17.87,7.402-30.186,20.307-30.186,20.307c-3.498,3.489-6.474,6.912-6.929,11.637c-0.464,4.724,1.218,9.399,4.566,12.747 L231.524,215.514z"></path> <path d="M280.476,296.444c-1.135-1.12-2.843-1.459-4.318-0.854c-1.475,0.614-2.446,2.064-2.446,3.672v113.685 c0,4.734,2.122,9.234,5.778,12.242c3.656,3.017,7.866,3.473,13.129,3.324c0,0,17.829,0.415,35.707-6.978 c17.878-7.419,30.179-20.316,30.179-20.316c3.498-3.489,6.481-6.92,6.946-11.637c0.44-4.716-1.235-9.383-4.584-12.747 L280.476,296.444z"></path> </g> </g>
<defs>
<linearGradient id="top_bottom" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0" stop-color="orange">
<animate begin="0s" dur="12s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
<stop offset="0" stop-color="black">
<animate begin="0s" dur="12s" attributeName="offset" fill="freeze" from="0" to="1" />
</stop>
</linearGradient>
</defs>
</svg>