Animation 居中动画文本
你好,我是一个全新的设计人员,几天来一直在努力解决这个问题,但也许我需要你们的帮助。以下是我想要实现的结果: 标题必须显示在行的中心 下面是我的结果: HTML: JS:Animation 居中动画文本,animation,text,Animation,Text,你好,我是一个全新的设计人员,几天来一直在努力解决这个问题,但也许我需要你们的帮助。以下是我想要实现的结果: 标题必须显示在行的中心 下面是我的结果: HTML: JS: 我试图展示:flex;父对象和从那里开始将子对象设置为中心,但没有任何更改。非常感谢您的帮助,谢谢 是啊!我已经设法解决了这个问题 CSS: <h1 class="ml4"> <span class="letters letters-1&quo
我试图展示:flex;父对象和从那里开始将子对象设置为中心,但没有任何更改。非常感谢您的帮助,谢谢 是啊!我已经设法解决了这个问题 CSS:
<h1 class="ml4">
<span class="letters letters-1">Ready</span>
<span class="letters letters-2">Set</span>
<span class="letters letters-3">Go!</span>
</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
.ml4 {
width: 100%;
height: 100px;
position: relative;
display: flex;
}
.ml4 .letters {
position: absolute;
margin: auto;
left: 0;
top: 0.3em;
right: 0;
opacity: 0;
justify-content: center;
}
var ml4 = {};
ml4.opacityIn = [0, 1];
ml4.scaleIn = [0.2, 1];
ml4.scaleOut = 3;
ml4.durationIn = 800;
ml4.durationOut = 600;
ml4.delay = 500;
anime
.timeline({ loop: true })
.add({
targets: ".ml4 .letters-1",
opacity: ml4.opacityIn,
scale: ml4.scaleIn,
duration: ml4.durationIn
})
.add({
targets: ".ml4 .letters-1",
opacity: 0,
scale: ml4.scaleOut,
duration: ml4.durationOut,
easing: "easeInExpo",
delay: ml4.delay
})
.add({
targets: ".ml4 .letters-2",
opacity: ml4.opacityIn,
scale: ml4.scaleIn,
duration: ml4.durationIn
})
.add({
targets: ".ml4 .letters-2",
opacity: 0,
scale: ml4.scaleOut,
duration: ml4.durationOut,
easing: "easeInExpo",
delay: ml4.delay
})
.add({
targets: ".ml4 .letters-3",
opacity: ml4.opacityIn,
scale: ml4.scaleIn,
duration: ml4.durationIn
})
.add({
targets: ".ml4 .letters-3",
opacity: 0,
scale: ml4.scaleOut,
duration: ml4.durationOut,
easing: "easeInExpo",
delay: ml4.delay
})
.add({
targets: ".ml4",
opacity: 0,
duration: 500,
delay: 500
});
.ml4 {
width: 100%;
height: 100px;
position: relative;
display: flex;
overflow: hidden;
}
.ml4 .letters {
position: absolute;
margin: auto;
left: 0;
top: 0.3em;
right: 0;
opacity: 0;
text-align: center;
}