我正在尝试与此fiddle相同的视觉效果,但我没有弹跳球。我得到以下结果:(与第一个小提琴示例完全相同的代码复制/粘贴)是什么问题?我在Googlle Chrome和Firefox上进行了测试,结果均相同。
body {
background: #8063ea;
}
.pong-loader {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
height: 40px;
width: 6px;
background-color: transparent;
animation: paddles 0.75s ease-out infinite;
transform: translate3d(0,0,0);
&:before {
content: "";
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 15px;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: ballbounce 0.6s ease-out infinite;
}
}
@keyframes paddles {
0% {
box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff;
}
50% {
box-shadow: -25px 8px 0px #fff, 25px -10px 0px #fff;
}
100% {
box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff;
}
}
@keyframes ballbounce {
0%{
transform: translateX(-20px) scale(1,1.2);
}
25%{
transform: scale(1.2,1);
}
50% {
transform: translateX(15px) scale(1,1.2);
}
75% {
transform: scale(1.2,1);
}
100% {
transform: translateX(-20px);
}
}
<div class="pong-loader"></div>
该代码笔具有SCSS,您将其粘贴为纯CSS。您可以使用codepen CSS菜单将SCSS编译为纯CSS并获得所需的效果
body {
background: #8063ea;
}
.pong-loader {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
height: 40px;
width: 6px;
background-color: transparent;
animation: paddles 0.75s ease-out infinite;
transform: translate3d(0, 0, 0);
}
.pong-loader:before {
content: "";
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
top: 15px;
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
animation: ballbounce 0.6s ease-out infinite;
}
@keyframes paddles {
0% {
box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff;
}
50% {
box-shadow: -25px 8px 0px #fff, 25px -10px 0px #fff;
}
100% {
box-shadow: -25px -10px 0px #fff, 25px 10px 0px #fff;
}
}
@keyframes ballbounce {
0% {
transform: translateX(-20px) scale(1, 1.2);
}
25% {
transform: scale(1.2, 1);
}
50% {
transform: translateX(15px) scale(1, 1.2);
}
75% {
transform: scale(1.2, 1);
}
100% {
transform: translateX(-20px);
}
}
<div class="pong-loader"></div>