我需要从单击从左向右移动的页面的位置创建divs。有没有办法不断改变我可以启动动画的位置?而不是固定左和固定的右?我正在使用CSS的密钥帧。
请尝试:
html
<div class="container">
<div class="startleft">
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
CSS
.container {
width:100%;
height:100vh;
}
.box {
margin: 5px;
width:30px;
height:30px;
background-color:blue;
}
JS
var container = document.getElementsByClassName("container")[0];
container.onclick = function(e) {
console.log("startleft");
var offset = e.offsetX;
var startleft = document.getElementsByClassName("startleft")[0];
startleft.setAttribute("style", "padding-left:"+ offset + "px");
};
codepen:https://codepen.io/yasirkamdar/pen/aqampj
这将设置偏移启动,您可以按照收到的偏移值来使用动画
html代码
<div class="move-me move-me-1">steps(4, end)</div>
<br>
<div class="move-me move-me-2">steps(4, start)</div>
<br>
<div class="move-me move-me-3">no steps</div>
SCSS代码:
.move-me {
display: inline-block;
padding: 20px;
color: white;
position: relative;
margin: 0 0 10px 0;
}
.move-me-1 {
animation: move-in-steps 8s steps(4) infinite;
}
.move-me-2 {
animation: move-in-steps 8s steps(4, start) infinite;
}
.move-me-3 {
animation: move-in-steps 8s infinite;
}
body {
padding: 20px;
}
@keyframes move-in-steps {
0% {
left: 0;
background: blue;
}
100% {
left: 100%;
background: red;
}
}
此链接帮助此链接尝试
谢谢