我想为网站创建一个CSS或JS动画.但我不知道如何编写代码.动画很难解释,这就是为什么我创建一个小gif动画以便更好地理解.
http://abload.de/img/animationxep49.gif
//编辑:我的主要问题是从白色到黑色的过渡,我在示例中说明了这一点.有人知道解决方案吗？
这是我没有动画的代码:
/* Responsive Navigation */
$(document).ready(function(){
$('#toggle').on('click', function(e){
e.preventDefault();
$('nav ul').slideToggle();
});
});
$(window).on('resize', function () {
if (window.matchMedia('(min-width: 860px)').matches) {
$('nav ul').show();
}
else {
$('nav ul').hide();
}
});
/* Allgemeines */
html, body {
margin: 0px;
padding: 0px;
color: #0a0a0a;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
height: 100%;
}
h1, h2, h3, h4, h5, h6{
font-family: 'Playfair Display', serif;
font-weight: 400;
}
h1 {
font-size: 100px;
font-size: 7.14rem;
text-align: center;
line-height: 1.2;
}
a {
transition: 0.3s;
}
a:hover {
color: #717171;
}
a:active {
font-weight: 700;
}
/* Spezifisch */
.logo {
float: left;
padding-top: 6px;
padding-left: 15px;
}
.logo a{
text-decoration: none;
color: #0a0a0a;
font-size: 22px;
font-size: 1,57rem;
font-family: 'Playfair Display', serif;
}
.logo a:hover {
color: #717171;
}
#toggle {
display: none;
}
nav ul {
float: right;
margin-top: 11px;
padding-right: 20px;
}
nav ul li {
float: left;
display: inline;
padding-right: 20px;
}
nav ul li a{
color: #0a0a0a;
text-decoration: none;
}
header {
clear: both;
width: 100%;
height: 90%;
position: relative;
}
header h1 {
color: white;
text-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
position: relative;
top: 40%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.darken {
width: 100%;
height: 100%;
position: absolute;
background: rgba(10, 10, 10, 0.1);
}
/* Breakpoints */
@media screen and (max-width: 860px){
.logo {
width: 100%;
padding: 6px 0 7px 0px;
}
.logotext {
margin-left: 15px;
}
#toggle {
display: inline;
float: right;
padding-right: 15px;
}
nav ul{
width: 100%;
padding: 0;
display: none;
}
nav ul li {
width: 100%;
text-align: center;
padding: 0;
}
nav ul li a {
display: block;
padding: 20px 0 20px 0;
}
}
@media screen and (max-width: 1100px){
h1 {
font-size: 84px;
font-size: 6rem;
}
}
@media screen and (max-width: 830px){
h1 {
font-size: 70px;
font-size: 5rem;
}
}
@media screen and (max-width: 650px){
h1 {
font-size: 56px;
font-size: 4rem;
}
}
@media screen and (max-width: 550px){
h1 {
font-size: 42px;
font-size: 3rem;
}
}
@media screen and (max-width: 400px){
h1 {
font-size: 28px;
font-size: 2rem;
}
}
Willkommen bei
den Berkelauern!
Willkommen bei
den Berkelauern!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae repellat soluta veritatis architecto, cum quod adipisci excepturi at aperiam iste!
//编辑Nr.2:
现在我有一个适用于示例页面的解决方案.现在我必须尝试在我的页面上工作.
.first, .second {
position: absolute;
left: 25%;
top: 40%;
text-align: center;
display: block;
overflow: hidden;
color: red;
}
.second {
color:black;
max-height:60px;
}It´s a test.
But it won´t work on my site.
It´s a test.
But it won´t work on my site.
有没有人知道如何创建一个有效的动画？
谢谢,Jannis
京公网安备 11010802040832号 | 京ICP备19059560号-6 