我想为网站创建一个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.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,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;
}
}
Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
logo">
logotext"> Von der Berkelaue
//编辑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;
}
有没有人知道如何创建一个有效的动画?
谢谢,Jannis
最佳答案
你应该能够达到你的目的只是使用的效果:
> 3 CSS3过渡;和
>几行javascript(控制何时激活转换)
见下面的例子:
function startAnimation() {
var frame = document.getElementsByClassName('frame')[0];
var image = frame.getElementsByClassName('image')[0];
var paragraph = image.getElementsByTagName('p')[0];
var newParagraph = paragraph.cloneNode(true);
document.body.appendChild(newParagraph);
frame.insertBefore(newParagraph,image);
setTimeout(function(){
image.classList.add('animated');
paragraph.classList.add('animated');
setTimeout(function(){
newParagraph.classList.add('animated');
},2400);
},1000);
}
window.addEventListener('load',startAnimation,false);
body {
margin: 0;
padding: 0;
background-color: rgb(0,0);
}
.frame {
position: relative;
width: 700px;
height: 100vh;
margin: 0 auto;
background-color: rgb(255,255,255);
}
.image {
position: absolute;
top: 0;
width: 700px;
height: 364px;
background: url('http://i.imgur.com/hdCeKIz.gif');
overflow: hidden;
transition: all 4s ease-in-out;
}
.frame p {
position: absolute;
top: 94px;
width: 700px;
text-align: center;
font-size: 40px;
color: rgb(0,0);
transition: all 2s ease-in-out;
}
.image p {
color: rgb(255,255);
transition: all 4s ease-in-out;
}
.image.animated {
transform: translate(0,-365px);
}
.frame p.animated {
transform: translate(0,-125px);
}
.image p.animated {
transform: translate(0,365px);
}