css - 为什么我的 css 旋转动画不起作用?
问题描述
请看看这个plunker:
https://plnkr.co/edit/hLd4TgrPjuMCXBqN?open=lib%2Fscript.js
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body onload="init()">
<div style="position: relative;">
<input type="text" />
<button onclick="buttonClick()">click me</button>
<div class="loader-overlay-container">
<div class="spinner">
</div>
<h3>Loading...</h3>
</div>
</div>
</body>
</html>
.loader-overlay-container {
width: 100vw;
height: 100vh;
background-color: rgb(255, 255, 255, 0.7);
position: fixed;
top: 0;
left: 0;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.spinner {
border-bottom: 3px solid grey;
border-top: 3px solid grey;
width: 50px;
height: 50px;
border-radius: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
}
input {
width: 200px;
}
function buttonClick() {
var input = document.querySelector('input');
alert(input.value);
}
我正在尝试创建一个位于页面内容之上的加载覆盖(当页面需要加载一些数据时)。叠加层基本上是一个固定的 div,覆盖整个屏幕并且是半透明的。在中心,有一个微调器,其下方带有“正在加载...”。我试图让微调器与一些 CSS 动画一起旋转。它不工作。任何人都可以看到问题吗?
解决方案
CSS 代码中的错误是keyframes
规则不能嵌套在 CSS 3 中。它应该在spinner
样式之外声明。请参阅下面的更正代码片段!
function buttonClick() {
var input = document.querySelector('input');
alert(input.value);
}
.loader-overlay-container {
width: 100vw;
height: 100vh;
background-color: rgb(255, 255, 255, 0.7);
position: fixed;
top: 0;
left: 0;
pointer-events: none;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
.spinner {
border-bottom: 3px solid grey;
border-top: 3px solid grey;
width: 50px;
height: 50px;
border-radius: 30px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
cursor: pointer;
animation-name: spin;
animation-duration: 1000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
input {
width: 200px;
}
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body onload="init()">
<div style="position: relative;">
<input type="text" />
<button onclick="buttonClick()">click me</button>
<div class="loader-overlay-container">
<div class="spinner">
</div>
<h3>Loading...</h3>
</div>
</div>
</body>
</html>
推荐阅读
- css - CSS GRID 在网格中避免 ::before 和 ::after
- c# - 如何在另一台计算机上使用 C# 中的数据库运行应用程序
- swift - 为什么在 Xcode 10 中默认不提供并行测试?
- javascript - FIREBASE phoneAuth (LinkWithPhoneNumber)。稍后如何在 Firebase Web 中更改用户的关联电话号码。(nodejs,创建反应应用程序)?
- spring-webflux - WebFilter 中的异步执行
- python - 无法替换数组 Python 中的双倍空格
- ios - 提交之前从 git 中删除的文件
- azure-devops - 在 Azure DevOps 中以 0 字节下载 Azure Blob
- java - 如何使不可更改的java类Serializable?
- c++ - 双引号传递给 QProcess::execute 的参数?