Question

我已经看到了很多关于这个问题的例子，其中大多数都使用jQuery。但我需要一个CSS替代品，因为我将在不同的视角中有不同的位置和效果。

例如当用户访问该页面并点击“注册＆＃39;按钮div从底部向上滑动，略微透明，并触摸任何位置以将其向下滑动。同样的情况应该发生在＆＃39; SIGN IN ＆＃39;按钮。

就像这样：

我所取得的成绩非常低，因为我不擅长CSS 小提琴：my work 我检查example taken寻求帮助。

CSS

html, body
    {
        width:100%;
        height: 100%;
    }
    body
    {
        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 1)), url(../images/bg.jpg);
        background-attachment: fixed;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #google
    {
        background-color: #D34836;
        width:100%;
        height:35px;
        margin-bottom:20px;
        border:none;
        color:#FFFFFF;
        font-family:'Source Sans Pro', sans serif;
        font-size:15px;
        border-radius:5px;
        -moz-border-radius: 5px;
        -webkit-border-radius:5px;
    }

    #container
    {
        margin-left:8%;
        margin-right:8%;
    }
    #greeting
    {
        width:100%;
        margin-top:28%;
        margin-bottom:32%;
    }
    #first_part, #second_part
    {
        text-align:center;
    }
    #first_part
    {
        font-size:38px;
        line-height:0.8;
        margin-bottom:30px;
    }
    #second_part
    {
        font-size:22px;
    }
    #signup, #signin
    {
        font-family:'Source Sans Pro', sans serif;
        font-size:15px;
        background-color:transparent;
        border: solid 1px;
        border-color:#FFFFFF;
        border-radius:5px;
        -moz-border-radius: 5px;
        -webkit-border-radius:5px;
        color:#FFFFFF;
        width:48%;
        height:35px;
    }
    #signin
    {
        margin-left: 3%;
  }
  #signup_container
  {
    color:#000000;
    background:#FFFFFF;
    height:50%;
    display: none;
  }
  #signup:focus + #signin
  {
    display: inline;
  }
  #signup:focus + #signin + #signup_container
  {
    display: block;
  }

任何形式的输入都会有很大的帮助。如果可以使用jQuery，我仍然希望知道方法并实现它。

UPDATE ：我希望breakpoint.js可以用于此目的吗？

单击移动设备上下滑动div，并在桌面上模态查看相同的div

0 个答案: