我正在尝试使用 CSS 创建过山车风格的动画。
我想知道如何在循环阶段弯曲“过山车”。
我正在寻找一个全 CSS 解决方案，但如果需要一点 JavaScript，我可以接受。
到目前为止我的代码：
#container {
width: 200px;
height: 300px;
margin-top: 50px;
position: relative;
animation: 10s infinite loop;
animation-timing-function: linear;
}
#coaster {
width: 100px;
height: 10px;
background: lightblue;
position: absolute;
bottom: 0;
left: 1px;
right: 1px;
margin: 0 auto;
}
@keyframes loop {
from {
margin-left: -200px;
}
30% {
margin-left: calc(50% - 75px);
transform: rotate(0deg);
}
60% {
margin-left: calc(50% - 125px);
transform: rotate(-360deg);
}
to {
transform: rotate(-360deg);
margin-left: 100%;
}
} …我想从 URL 中提取路径，并且我想使用正则表达式。
我正在使用这个正则表达式：
^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\n\?\=?\#]+)
和一个副作用，最后一个/被捕获。
例如——
domain.com/home/ = domain.com/home/
domain.com/home?param=value = domain.com/home
如何验证特定捕获组的最后一个字符不是/？
注意- 我知道我可以用另一个正则表达式匹配来解决这个问题，但我认为它可以用一个来完成。