我想在3D中从上到下移动一个元素。
为此,我使用了CSS中的动画模式。我设计的动画将元素旋转360度,同时向下移动。
元素的360度旋转模式工作正常,但它不向下移动,我不知道问题出在哪里。
你能告诉我一个简单的解决方案,通过编辑代码从上到下移动元素吗?
提前感谢任何帮助。
const items = document.querySelectorAll(".SVG_main");
items.forEach(item => item.classList.add("animating"));
body{
position: relative;
direction: rtl;
}
.SVG_main svg{
width: 80px;
height: 80px;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.animating.SVG_main svg{
animation: MoveSvg 4.5s linear infinite;
}
@-webkit-keyframes MoveSvg {
0% {
top: 0;
left: 0;
transform: rotateY(0deg);
}
50% {
top: 50%;
left: 50%;
transform: rotateY(180deg);
}
100% {
top: 100%;
left: 0;
transform: rotateY(360deg);
}
}
@keyframes MoveSvg {
0% {
top: 0;
left: 0;
transform: rotateY(0deg);
}
50% {
top: 50%;
left: 50%;
transform: rotateY(180deg);
}
100% {
top: 100%;
left: 0;
transform: rotateY(360deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="SVG_main">
<svg fill="#000000" width="80px" height="80px" viewBox="0 0 32 32" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<title>leaf</title>
<path
d="M28.082 9.534c-0.058 0.174-0.117 0.349-0.176 0.525 0.674 3.296 0.425 6.877-1.276 10.787 0.247-2.511 0.206-4.913-0.182-7.215-0.458 0.891-1.042 1.755-1.64 2.624 0.085 2.497-0.381 5.132-1.603 7.944 0.196-1.997 0.16-3.922-0.036-5.794-0.801 0.911-1.695 1.786-2.697 2.587-0.237 1.584-0.684 3.223-1.421 4.92 0.132-1.348 0.154-2.68 0.109-3.972-2.221 1.51-4.858 2.718-8.053 3.389 2.691-1.51 4.838-3.068 6.596-4.665-1.156-0.241-2.346-0.399-3.535-0.51 1.572-0.397 3.124-0.552 4.628-0.51 1.075-1.099 1.973-2.205 2.697-3.353-2.005-0.361-4.034-0.465-6.086-0.328 2.355-1.14 4.702-1.538 7.033-1.385 0.602-1.24 1.014-2.523 1.312-3.826-1.773-0.168-3.704 0.253-5.904 0.802 1.986-1.82 4.133-2.61 6.268-2.842 0.111-0.903 0.169-1.808 0.18-2.741-9.848-7.007-7.239 16.56-22.665 20.346 12.693 7.863 37.271-3.539 26.451-16.782zM25.788 1.846c0.628-0.305 1.39-0.323 1.968 0.219 0.33 3.103-0.68 9.663-4.665 14.249 3.039-5.538 3.261-9.548 2.697-14.467v-0z">
</path>
</svg>
</div>
1条答案
按热度按时间tv6aics11#
**编辑:**要移动到页面底部,可以使用
100vh
值并从中减去svg的高度。您可以使用
translateY
属性简单地设置动画: