动画test

<!DOCTYPE html>
<html lang="en">

html {
  margin: 0;
}

body {
  background-color: black;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 0;
  margin-left: 5%;
}

</style>
<style>

#loading {
  width: 70px;
  height: 80px;
  justify-content: center;
  align-items: center;
}

.loading {
  width: 10px;
  height: 80px;
  float: left;
  margin: 2px;
  background-color: #6dc4ec;
  animation: loading 1s infinite ease-in-out;
  /*animation：动画名称 持续时间 动画速度曲线 延迟 执行多少次 是否正反方向轮流播放*/
}

.loading2 {
  animation-delay: -0.9s;
  /*定义开始执行的地方，负号表示直接从第900ms开始执行*/
}

.loading3 {
  animation-delay: -0.8s;
}

.loading4 {
  animation-delay: -0.7s;
}

.loading5 {
  animation-delay: -0.6s;
}

@keyframes loading {

  0%,
  40%,
  100% {
    /*定义每帧的动作*/
    -webkit-transform: scaleY(0.5);
  }

  20% {
    -webkit-transform: scaleY(1);
  }
}

.shadow {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1000;
  background-color: #000;
  opacity: 0.6;
  display: none;
}

.flexOuter {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
}

</style>
<style>

@keyframes typing {
  from {
    width: 0ch;
  }

  to {
    width: 25ch;
  }
}

@keyframes crow {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

</style>
<style>

#form {
  color: white;
  float: left;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 50px;
  margin-top: 20%;
  margin-left: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#load {
  color: black;
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  margin: 5px 20px;
  width: 200px;
  height: 80px;
  background: #fff;
  border-radius: 10px;
  margin-top: 20px;
  margin-left: 40%;
  cursor: pointer;
}

.showtext {
  display: none;
  position: absolute;
  width: 0ch;
  color: white;
  float: left;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 50px;
  margin-top: 15%;
  margin-left: 20%;
  overflow: hidden;
  white-space: nowrap;
  animation: typing 5s linear forwards 1s;
  animation-iteration-count: 1;
}

.crow {
  display: none;
  position: absolute;
  float: left;
  margin-top: 15%;
  color: #fff;
  font-family: consolas;
  font-weight: bold;
  font-size: 50px;
  animation: crow 0.5s forwards 0s infinite;
}

#show2,
#crow2 {
  margin-top: 20%;
}

#show3,
#crow3 {
  margin-top: 25%;
}

#typing span {
  color: #fff;
}
.input {
  height: 50px;
  width: 200px;
  font-size: 40px;
  font-weight: bold;
}

</style>
</head>

Cotton Spetember Price: &nbsp&nbsp&nbsp<input class="input" id="price" type="text" name="firstname"><br>

</div>
<button id="load"> LOAD </button>
<p class="showtext" id="show1">9月合约套期保值建议：</p>
<div class="crow" id="crow1">|</div>
<p class="showtext" id="show2">温和下跌</p>
<div class="crow" id="crow2">|</div>
<p class="showtext" id="show3">卖call/熊市价差/保护性看跌</p>
<div class="crow" id="crow3">|</div>
<div class="shadow" id="shadow">

<div class="flexOuter">
  <div id="loading">
    <div class="loading loading1"></div>
    <div class="loading loading2"></div>
    <div class="loading loading3"></div>
    <div class="loading loading4"></div>
    <div class="loading loading5"></div>
  </div>
</div>

</div>
</body>
<script>
var timeout = 10;
var form = document.getElementById("form");
var load = document.getElementById("load");
var load = document.getElementById("load");
var price = document.getElementById("price");
var s1 = document.getElementById("show1");
var s2 = document.getElementById("show2");
var s3 = document.getElementById("show3");
var c1 = document.getElementById("crow1");
var c2 = document.getElementById("crow2");
var c3 = document.getElementById("crow3");
document.getElementById("load").addEventListener('click', function (event) {

if (price.value == '') {
  return;
}
document.getElementById("shadow").style.display = "block";
setTimeout(() => {
  form.style.display = "none";
  load.style.display = "none";
  document.getElementById("shadow").style.display = "none";
}, 1000 * timeout);
setTimeout(() => {
  s1.style.display = "block"
}, 1000 * (timeout));
setTimeout(() => {
  s2.style.display = "block"
  c1.style.display = "none"
}, 1000 * (timeout + 5));
setTimeout(() => {
  s3.style.display = "block"
  c2.style.display = "none"
}, 1000 * (timeout + 7));

});
</script>

</html>

动画test

张磊

引用和评论

100个React最佳实践小技巧

Javascript(turfjs)等值线图绘制

2024最全ECharts 实战大全（速记版+资源）

CSS 如何模拟“真实的”进度条？

如何在仓库中添加只对自己生效的.gitignore规则？

在ONES的工作体验分享

真是惭愧，直到今天，我才搞懂桶排序算法