-2
Ich versuche, die Webseite von unten nach oben springen zu lassen. Das ist, was ich versuche zu tun: Für beide Versionen (Desktop und Mobile) muss die Kopfzeile eine Slide-In-Animation haben (sie muss von unten nach oben kommen und bouncen), diese Animation sollte durch Variieren des Randes von oben erfolgen 150% bis -5% und dann bis 0%, jeweils zu den Zeitpunkten 0%, 60% und 100%.Wie man die Webseite von unten nach oben springt
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:[email protected]">[email protected]</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©-2017</p>
</section>
</div>
</footer>
</div>
</div>
</body>
</html>
Ja, das hilft wirklich, vielen Dank. – Raw