极客观点
项目管理
HarmonyOS
html:
<body>
<div class="head">
<h1>云节点</h1>
</div>
<div class="content node-con">
<!-- 上图 -->
<div class="global">
<img src="./images/qiu1.png" alt="tp">
</div>
<!-- 下图 -->
<div class="yunNode">
<img src="./images/1.png" alt="tp" class="flowImg">
<img src="./images/souji.png" alt="tp" class="ynBg">
<img src="./images/pan.png" alt="tp" class="phone">
</div>
</div>css:
/ 能量柱 /
.yunNode .flowImg {
position: absolute;
left: 0;
width: 100%;
height: 3rem;
bottom: 33%;
animation: flow 3s linear infinite;}
/ 放射动画 /
@-ms-keyframes flow {
0% {
height: 0;
}
100% {
height: 2.6rem;
}}
@-moz-keyframes flow {
0% {
height: 0;
}
100% {
height: 2.6rem;
}}
@-o-keyframes flow {
0% {
height: 0;
}
100% {
height: 2.6rem;
}}
@-webkit-keyframes flow {
0% {
-webkit-height: 0;
}
100% {
-webkit-height: 2.6rem;
}}
@keyframes flow {
0% {
height: 0;
}
100% {
height: 2.6rem;
}}
苹果机上的效果：
问题出现的环境背景及自己尝试过哪些方法
相关代码
// 请把代码文本粘贴到下方（请勿用图片代替代码）
html5
问题已解决，解决方案就是简单的在中间加了一个50%时的动画，至于是为什么？我也不清楚了。