如何防止 CSS 动画移动我页面的其余部分？

Ben 发表于 Dev

Ben

我已经使用关键帧向按钮添加了动画。动画应该会产生脉冲效果。动画似乎工作正常，但是当我在其下方添加文本时，动画也会导致文本移动。

这是动画的截图

随着按钮本身的增长和缩小，“脉冲”文本会上下移动。

这是我的相关 CSS：

 **Button num 4 **/
#block-yui_3_17_2_1_1614371999436_9067 .sqs-block-button-element {
  position: relative !important;
  color: black !important;
  background-color: orange !important;
  box-shadow: 5px 10px green;
  animation: demoButtonPulse 1s ease-in-out infinite;
}

@keyframes demoButtonPulse {
    0% {padding: 1.3rem 2.171rem;;
          background: red;}
    50% {padding: 1.43rem 2.3881rem;;
          background: green;
        }
    100% {padding: 1.3rem 2.171rem;;
              background: red;}
  }

#block-yui_3_17_2_1_1614371999436_9067 .sqs-block-button-element:hover {
  color: white !important;
  background-color: black !important;
  border-color: green;
  box-shadow: 5px 10px orange;
}

关于如何在按钮脉冲时防止文本移动的任何想法？

伯特·W

我相信我能够在关键帧中使用缩放而不是填充来完成您想要的：

.sqs-block-button-element{
  position: relative !important;
  padding: 10px;
  margin-bottom: 2rem;
  color: black !important;
  background-color: orange !important;
  box-shadow: 5px 10px green;
  animation: demoButtonPulse 1s ease-in-out infinite;
}

@keyframes demoButtonPulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  }

.sqs-block-button-element:hover {
  color: white !important;
  background-color: black !important;
  border-color: green;
  box-shadow: 5px 10px orange;
}

<main>
<button type="submit" class="sqs-block-button-element">
  Call to Action
</button>
    <div>pulsing</div>
</main>

另一解决方案将是包裹button在一个div并给div一个固定的高度：

.sqs-block-button-element{
  position: relative !important;
  padding: 10px;
  margin-bottom: 2rem;
  color: black !important;
  background-color: orange !important;
  box-shadow: 5px 10px green;
  animation: demoButtonPulse 1s ease-in-out infinite;
}

.button-height {
  height: 100px;
}

@keyframes demoButtonPulse {
    0% {padding: 1.3rem 2.171rem;;
          background: red;}
    50% {padding: 1.43rem 2.3881rem;;
          background: green;
        }
    100% {padding: 1.3rem 2.171rem;;
              background: red;}
  }

/* @keyframes demoButtonPulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.2);}
    100% {transform: scale(1);}
  } */

.sqs-block-button-element:hover {
  color: white !important;
  background-color: black !important;
  border-color: green;
  box-shadow: 5px 10px orange;
}

<main>
  <div class="button-height">
<button type="submit" class="sqs-block-button-element">
  Call to Action
</button>
    </div>
    <div>pulsing</div>
</main>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于 2021-08-20

我来说两句

0 条评论

登录后参与评论

如何在html / css中使导航栏与页面的其余部分没有空间？

CSS规则泄漏到页面的其余部分

如何防止 CSS 动画移动我页面的其余部分？

如何防止 CSS 动画移动我页面的其余部分？

UITableView的项目向下滚动后更改颜色，然后快速备份

Linux的官方Adobe Flash存储库是否已过时？

用日期数据透视表和日期顺序查询

应用发明者仅从列表中选择一个随机项一次

Mac OS X更新后的GRUB 2问题

验证REST API参数

Java Eclipse中的错误13，如何解决？

带有错误“ where”条件的查询如何返回结果？

ggplot：对齐多个分面图-所有大小不同的分面

尝试反复更改屏幕上按钮的位置 - kotlin android studio

如何从视图一次更新多行（ASP.NET - Core）

计算数据帧中每行的NA

蓝屏死机没有修复解决方案

在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

离子动态工具栏背景色

VB.net将2条特定行导出到DataGridView

通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

在Windows 7中无法删除文件（2）

python中的boto3文件上传

当我尝试下载 StanfordNLP en 模型时，出现错误

Node.js中未捕获的异常错误，发生调用