Настоящий друг — это человек, который выскажет тебе в глаза все, что о тебе думает, а всем скажет, что ты — замечательный человек.
18-декабря-2023, 21:37 1 0
Это хороший пример, демонстрирующий возможности SVG. Вы можете создать не только простую анимацию, но и такую сложную анимацию, как эта; плавно создаем цикл трансформации трех разных объектов. Анимация создана с использованием одного div контейнера, небольшого CSS и библиотеки jаvascript под названием Lottie .
HTML
<div id="svgContainer" style=""></div>
CSS
html {
margin: 0;
padding: 0;
background-color: black;
}
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
#svgContainer {
width: 80%;
height: 80%;
background-color: #000;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
jаvascript
/* Shapes */
var svgContainer = document.getElementById('svgContainer');
var animItem = bodymovin.loadAnimation({
wrapper: svgContainer,
animType: 'svg',
loop: true,
animationdаta: JSON.parse(animationData)
});