如何从下到上反弹网页

时间：2017-08-29 01:42:18

标签： jquery html css

我正在尝试让网页从下到上反弹。这就是我要做的事情：对于这两个版本（桌面和移动），标题必须有一个滑入式动画（它必须来自自下而上和反弹）这个动画应该通过改变margin-top来完成150％至-5％然后至0％，分别为0％，60％和100％。

CSS 

   
    body{
        background-color: #02010a;
        color: white;
        font-family: 'Dancing Script', cursive;
    }
    .contenido{
        width: 900px;
        margin: 0 auto;
        text-align: center;
    }
    #pagetitle{
        background-color: #5b7989;
        width: 900px;
        height: 100px;
        margin-top: 0 auto;
        display: block;
        position: relative;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }
    h1{
        float: left;
        display: inline-block;
        text-shadow: 2px 2px #02010a;
        padding-left: 10px;
    }
    a{
        text-decoration: none;
    }
    ul li a{
        color: white;
    }
    #navigation{
        float: right;
    }
    #nav_item{
        list-style-type: none;
        font-size: 100%;
        padding: 10px 10px 10px 10px;
    }
    li{
        display: inline;
        font-size: 20px;
    }
    #central{
        background-color: #82c3a6;
        width: 900px;
        height: 450px;
        display: block;
        position: relative;
    }
    #centralpic{
        align-content: center;
        margin-top: 15px;
        box-shadow: 2px 2px #02010a;
    }
    #sidebyside{
        background-color: #d5c75f;
        border-width: 1px;
        display: flex;
        height: 500px;
        width: 900px;
        overflow: hidden;
        align-content: center;
        color: black;
    }
    #leftpic{
        height: 300px;
        width: auto;
        position: relative;
        margin: 60px auto;
        align-content: center;
        box-shadow: 2px 2px #02010a;
    }
    #leftpic:hover{
        transform: rotate(10deg);
        transition: all 0.3s ease-in-out 0s;
        text-shadow: #82c3a6;
        border: 2px;
    }
    #rightpic{
        height: 300px;
        width: auto;
        position: relative;
        margin: 60px auto;
        align-content: center;
        box-shadow: 2px 2px #02010a;
    }
    #rightpic:hover{
        transition: all 0.3s ease-in-out 0s;
        transform-style: flat 5px 20px;
        transform: translatey(-5px) translateX(20px);
        text-shadow: #82c3a6;
        border: 2px;
    }
    .piedepagina{
        background-color: #c6d5c5;
        color: black;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
    }
    #footer1{
        display: flex;
        flex-wrap: nowrap;
        width: 900px;
        text-align: left;
    }
    #contact{
        flex-direction: column;
        text-align: left;
        width: 50%;
        margin: 10px;
    }
    #contact h3{
        text-align: left;
    }
    #terms{
        flex-direction: column;
        text-align: left;
        width: 50%;
        margin: 10px;
    }
    #terms h3{
        text-align: left;
    }
    #redes_sociales{
        flex-direction: column;
        text-align: left;
        width: 50%;
        margin: 10px;
    }
    #redes_sociales h3{
        text-align: left;
    }
    .facebook_icon{
        height: 25px;
        width: 0 auto;
    }
    .twitter_icon{
        height: 25px;
        width: 0 auto;
    }
    .instagram_icon{
        height: 25px;
        width: 0 auto;
    }
    #rights{
        flex-direction: column;
        text-align: left;
        width: 50%;
        margin: 10px;
    }
    #rights h3{
        text-align: left;
    }
    figcaption{
        text-decoration: underline;
    }

HTML 

 <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <link rel="stylesheet" href="css/style.css">
            <link rel="stylesheet" href="css/mobile.css">
            <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
            <title>Comenzando la Fotografia</title>
        </head>
        <body>
            <div class="slide_bottom_top">
            <div class="contenido">
                <div id="pagetitle">
                    <h1>Comenzando la Fotografia</h1>
                <div id="navigation">
                    <ul id="nav_item">
                        <li><a href="index.html" id="inicio">Inicio</a></li>
                        <li><a href="paisajes.html" style="text-decoration: underline">Paisajes</a></li>
                        <li><a href="retratos.html" style="text-decoration: underline">Retratos</a></li>
                    </ul>
                    <div style="clear:both"></div>
                </div>
                </div>
                <div>
                    <section id="central">
                        <img id="centralpic" style="align-content: center" src="img/paisajecentral.png" alt="imagencentral" title="paisaje1" width="730" height="413">
                    </section>
                    <article id="sidebyside">
                        <figure>
                            <img id="leftpic" src="img/portadapng.jpg" alt="imagenderecha" title="paisaje2" width="640" height="400"> <figcaption>Paisaje</figcaption>
                        </figure>
                        <figure>
                            <img id="rightpic" src="img/woman.jpg" alt="imagenizquierda" title="retrato1" width="736" height="1104"> <figcaption>Retrato</figcaption>
                        </figure>
                    </article>
                </div>
                <footer class="piedepagina">
                    <div id="footer1">
                        <section id="contact">
                            <h3>Contacto</h3>
                            <p>Correo: <a href="mailtome:rdelarosa042019@gmail.com">rdelarosa042019@gmail.com</a></p>
                            <p>Calle 3ra Avenida la Paz</p>
                            <p>Telefono: 220-0000</p>
                        </section>
                        <section id="terms">
                            <h3>Terminos</h3>
                            <p>Nos reservamos los derechos de autor y todo contenido es privado</p>
                        </section>
                        <section id="redes_sociales">
                            <h3>Redes Sociales</h3>
                            <a target="_blank" href="https://www.facebook.com"><img src="icon/facebook.png" class="facebook_icon">Comenzando la Fotografia</a><br>
                            <a target="_blank" href="https://twitter.com/"><img src="icon/twitter.png" class="twitter_icon">@comenzandolafotografia</a><br>
                            <a target="_blank" href="https://www.instagram.com/?hl=en"><img src="icon/instagram.png" class="instagram_icon">#comenzandolafotografia</a>
                        </section>
                        <section id="rights">
                            <h3>Derechos</h3>
                            <p>Ruben De La Rosa</p> <p>Copyrights&#169;-2017</p>
                        </section>
                    </div>
                </footer>
            </div>
            </div>
        </body>
    </html>

2 个答案:

答案 0 :(得分：0)

这是你需要的吗？

＆＃13;
＆＃13; 
body {
  background-color: #02010a;
  color: white;
  font-family: 'Dancing Script', cursive;
}

.contenido {
  width: 900px;
  margin: 0 auto;
  text-align: center;
}

#pagetitle {
  background-color: #5b7989;
  width: 900px;
  height: 100px;
  margin-top: 0 auto;
  display: block;
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
animation: mybounce 2s ease forwards;
}

@keyframes mybounce {
  0% { margin-top: 150%; }
  50% { margin-top: -5%; }
  100% { margin-top: 0%; }
}

h1 {
  float: left;
  display: inline-block;
  text-shadow: 2px 2px #02010a;
  padding-left: 10px;
}

a {
  text-decoration: none;
}

ul li a {
  color: white;
}

#navigation {
  float: right;
}

#nav_item {
  list-style-type: none;
  font-size: 100%;
  padding: 10px 10px 10px 10px;
}

li {
  display: inline;
  font-size: 20px;
}

#central {
  background-color: #82c3a6;
  width: 900px;
  height: 450px;
  display: block;
  position: relative;
}

#centralpic {
  align-content: center;
  margin-top: 15px;
  box-shadow: 2px 2px #02010a;
}

#sidebyside {
  background-color: #d5c75f;
  border-width: 1px;
  display: flex;
  height: 500px;
  width: 900px;
  overflow: hidden;
  align-content: center;
  color: black;
}

#leftpic {
  height: 300px;
  width: auto;
  position: relative;
  margin: 60px auto;
  align-content: center;
  box-shadow: 2px 2px #02010a;
}

#leftpic:hover {
  transform: rotate(10deg);
  transition: all 0.3s ease-in-out 0s;
  text-shadow: #82c3a6;
  border: 2px;
}

#rightpic {
  height: 300px;
  width: auto;
  position: relative;
  margin: 60px auto;
  align-content: center;
  box-shadow: 2px 2px #02010a;
}

#rightpic:hover {
  transition: all 0.3s ease-in-out 0s;
  transform-style: flat 5px 20px;
  transform: translatey(-5px) translateX(20px);
  text-shadow: #82c3a6;
  border: 2px;
}

.piedepagina {
  background-color: #c6d5c5;
  color: black;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

#footer1 {
  display: flex;
  flex-wrap: nowrap;
  width: 900px;
  text-align: left;
}

#contact {
  flex-direction: column;
  text-align: left;
  width: 50%;
  margin: 10px;
}

#contact h3 {
  text-align: left;
}

#terms {
  flex-direction: column;
  text-align: left;
  width: 50%;
  margin: 10px;
}

#terms h3 {
  text-align: left;
}

#redes_sociales {
  flex-direction: column;
  text-align: left;
  width: 50%;
  margin: 10px;
}

#redes_sociales h3 {
  text-align: left;
}

.facebook_icon {
  height: 25px;
  width: 0 auto;
}

.twitter_icon {
  height: 25px;
  width: 0 auto;
}

.instagram_icon {
  height: 25px;
  width: 0 auto;
}

#rights {
  flex-direction: column;
  text-align: left;
  width: 50%;
  margin: 10px;
}

#rights h3 {
  text-align: left;
}

figcaption {
  text-decoration: underline;
}
＆＃13; 
<div class="slide_bottom_top">
  <div class="contenido">
    <div id="pagetitle">
      <h1>Comenzando la Fotografia</h1>
      <div id="navigation">
        <ul id="nav_item">
          <li><a href="index.html" id="inicio">Inicio</a></li>
          <li><a href="paisajes.html" style="text-decoration: underline">Paisajes</a></li>
          <li><a href="retratos.html" style="text-decoration: underline">Retratos</a></li>
        </ul>
        <div style="clear:both"></div>
      </div>
    </div>
    <div>
      <section id="central">
        <img id="centralpic" style="align-content: center" src="img/paisajecentral.png" alt="imagencentral" title="paisaje1" width="730" height="413">
      </section>
      <article id="sidebyside">
        <figure>
          <img id="leftpic" src="img/portadapng.jpg" alt="imagenderecha" title="paisaje2" width="640" height="400">
          <figcaption>Paisaje</figcaption>
        </figure>
        <figure>
          <img id="rightpic" src="img/woman.jpg" alt="imagenizquierda" title="retrato1" width="736" height="1104">
          <figcaption>Retrato</figcaption>
        </figure>
      </article>
    </div>
    <footer class="piedepagina">
      <div id="footer1">
        <section id="contact">
          <h3>Contacto</h3>
          <p>Correo: <a href="mailtome:rdelarosa042019@gmail.com">rdelarosa042019@gmail.com</a></p>
          <p>Calle 3ra Avenida la Paz</p>
          <p>Telefono: 220-0000</p>
        </section>
        <section id="terms">
          <h3>Terminos</h3>
          <p>Nos reservamos los derechos de autor y todo contenido es privado</p>
        </section>
        <section id="redes_sociales">
          <h3>Redes Sociales</h3>
          <a target="_blank" href="https://www.facebook.com"><img src="icon/facebook.png" class="facebook_icon">Comenzando la Fotografia</a><br>
          <a target="_blank" href="https://twitter.com/"><img src="icon/twitter.png" class="twitter_icon">@comenzandolafotografia</a><br>
          <a target="_blank" href="https://www.instagram.com/?hl=en"><img src="icon/instagram.png" class="instagram_icon">#comenzandolafotografia</a>
        </section>
        <section id="rights">
          <h3>Derechos</h3>
          <p>Ruben De La Rosa</p>
          <p>Copyrights&#169;-2017</p>
        </section>
      </div>
    </footer>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

查看animate.css它对动画有奇妙的效果并且非常易于使用。 https://daneden.github.io/animate.css/

相关问题
最新问题