单击动画图像 HTML

Question

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

总结问题
1：点击文字使dive向下滑动变暗??
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>

Answer 1

.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>

Answer 2

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

从 with 中减去边框

#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>

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

Answer 3

您可以对所有元素使用 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>

单击动画图像 HTML

Animate image on click HTML

html

css

animation