单击 HTML 时动画图像 [重复]答案

【问题标题】：Animate image on click HTML [duplicate]单击 HTML 时动画图像 [重复]
【发布时间】：2021-07-03 15:34:59
【问题描述】：

有没有一种方法可以让一个人点击文本Hello，然后它会向下滑动并变暗？在手机上，他们应该能够将它拉下来，然后它就会变暗并滑下来？？

总结问题
1：点击文字使潜水向下滑动并变暗？？
2：Mobile 将 div 拉出屏幕并手动将其变暗？？

#home_main_main {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 3px solid darkgrey;
  width: calc(100% - 6px);
  height: 80%;
  left: 0px;
  position: absolute;
  position: fixed;
  left: 0;
  bottom: 0;
}

b {
  font-size: 20px;
}

<div id="home_main_main"><br>
    <b>&nbsp;Hello</b>
</div>

【问题讨论】：

你应该为你的“动画”打开一个单独的问题，并添加一些你已经尝试过的代码。
@jona 如果我创建了你会回答吗？
我可以查看它，但我认为您需要 javascript 来处理它，因为它应该发生在点击时，而不仅仅是在悬停时发生。
没问题我可以用js

标签： html css animation

【解决方案1】：

您可以对所有元素使用box-sizing 属性。

使用box-sizing: border-box;，宽度包含padding 和border 值。

*{box-sizing: border-box;}

#home_main_main {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 3px solid darkgrey;
  width: 100%;
  height: 80%;
  left: 0px;
  position: absolute;
  position: fixed;
  left: 0;
  bottom: 0;
}

b {
  font-size: 20px;
}

<div id="home_main_main"><br>
    <b>&nbsp;Hello</b>
</div>

【讨论】：

【解决方案2】：

边框将围绕您的元素设置。目前你的元素已经有 100% 的宽度。解决此问题的一种方法是使用 calc 减去边框

#home_main_main {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 3px solid darkgrey;
  width: calc(100% - 6px);
  height: 80%;
  left: 0px;
  position: absolute;
  position: fixed;
  left: 0;
  bottom: 0;
}

b {
  font-size: 20px;
}

<div id="home_main_main"><br>
    <b>&nbsp;Hello</b>
</div>

请记住，您的边框位于元素的两侧。使用 3 像素的边框，总共 6 像素的宽度必须从 100% 中移除。

【讨论】：

【解决方案3】：

.body {
  position: relative;
  width:100%;
  height:100%;
  }
  #home_main_main{
  position : absolute;
  bottom:0px;
  width:100%;
  height:80%;
  }
  .b{
    font: as you like ;
    
 }

<div id="home_main_main"><br>
    <b>&nbsp;Hello</b>
</div>

【讨论】：

似乎不起作用
overflow: hidden 只会删除任何垂直滚动，但不会解决问题。
任何超出 div 大小的边框或背景都将被删除
@pycrypt 是的，它将被删除。但它不会像 op 想要的那样显示在里面
设置正文宽度：100% 和高度：100，位置：相对，将起作用