html - 加载 pong 样式页面 Html/Css
问题描述
我正在尝试做与这个小提琴相同的视觉效果,但我没有弹跳球。我得到了这个结果:(与第一个小提琴示例完全相同的代码复制/粘贴)有什么问题?我在谷歌 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>
解决方案
codepen 具有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>
推荐阅读
- apache-flink - 源操作符卡在 requestBufferBuilderBlocking 中
- java - 如何从 2 个整数中获得下一个最接近的整数?
- java - 如何在 JavaFX 项目中实现 RichTextFX
- python - 初学者:Python--如何将 elif 语句嵌入到 while 循环中(每次通过循环都会改变输出的路径?!)
- python - KeyError:from_pandas_edge_list() 的“来源”
- node.js - 如何使用 DateTimePicker 在 android 中显示选定的日期和时间
- sql - PostgreSQL。INNER JOIN 不排除任何东西并给出整个表
- google-apps-script - 如何在更改之前打印值?(谷歌脚本)
- css - 将 javascript 中的 css 变量颜色动态添加到 Sass 函数
- google-sheets - 使用数组公式跳过空白值和公式的顺序行编号