CSS, анимация неба  
Автор Сообщение

0
Сообщение CSS, анимация неба

Переношу этот код к себе на сайт, но облака статично стоят, помогите ребят ;(.

 

Само небо вот:

Код:

 

Вывожу в скелет так:

Код:

<span class="clouds"></span>

 

В CSS добавляю так:

Код:

.clouds {

  1. position: absolute;
  2. top: 60px;
  3. z-index: 1;
  4. display: block;
  5. height: 150px;
  6. width: 100%;
  7. background-image:url(../images/bones/clouds.png);
  8. -webkit-animation: clouds 100s linear 0 infinite normal;
  9. -webkit-animation-fill-mode: both;
  10.   -moz-animation: clouds 100s linear 0 infinite normal;
  11.   -moz-animation-fill-mode: both;
  12.   -animation: clouds 100s linear 0 infinite normal;
  13.   -animation-fill-mode: both;
  14.   animation: clouds 100s linear 0 infinite normal;
  15.   animation-fill-mode: both;

}

 

Посмотреть на живые облака можно здесь:



14 сен 2014, 20:17
Профиль

0
Сообщение CSS, анимация неба

Покажи свой css файл.

Или вообще, сайт



14 сен 2014, 20:34
Профиль

0
Сообщение CSS, анимация неба

Мой сайт на joomla 1.5, какая разница какой сайт

 

Код:

body {
background-color: #FFF;
background-image: url(/backlol.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 73%;
color: #999;
line-height: 1.4em;
}
h1 {
font-size: 150%;
color: #84C225;
}
h2 {
color: #84C225;
font-size: 130%;
}
h3 {
color: #84C225;
font-size: 110%;
}
h4 {
color: #84C225;
font-size: 100%;
}
a:link , a:visited, a:active{
color: #84C225;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFF;
background-color: #84C225;
}


#container {
width: 850px;
margin: 0 auto;
background-color: #FFF;
box-shadow: #333 0 0 15px;
}
#header {
height: 125px;
width: 850px;
margin: 30px auto;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: right top;
background-color: #FFF;
box-shadow: #333 0 0 15px;
}
#header ul {
list-style: none;
margin: 0px;
float: left;
padding-top: 25px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 130px;
}
#header li {
padding-right: 1em;
float: left;
}
#header a:link, #header a:visited {
color: #666;
text-decoration: none;
text-transform: uppercase;
font: 0.95em Tahoma, Arial, geneva, sans-serif;
}
#header a:hover {
background-color: #84C225;
color: #FFF;
}

 

#content {
float: right;
width: 600px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 0px;

}
#center {
float: left;
width: 500px;
}

#left {
width: 200px;
padding-top: 0px;
padding-bottom: 300px;
text-align: right;
}
#left ul {
list-style: none;
text-align: right;
padding-top: 0px;
padding-bottom: 5px;
width: 150px;
float: right;
font-size: 110%;
}
#left ul a:link, #left ul a:visited {
color: #666;
text-decoration: none;
display: block;
font-weight: bold;
}
#left ul a:hover {
color: #FFF;
background-color: #84C225;
}


#footer {
height: 50px;
width: 750px;
margin: 0 auto;
text-align: right;
color: #FFFFFF;
clear: both;
font-size: 0.9em;
padding: 0px;
}
#copyright {
text-align: center;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
color: #999;
}
#current {
text-decoration: underline;
}

 

http://jsfiddle.net/ заведи мне облака здесь?



14 сен 2014, 20:36
Профиль

0
Сообщение CSS, анимация неба

Сонистар писал(а):

Мой сайт на joomla 1.5, какая разница какой сайт

 

Код:

body {
background-color: #FFF;
background-image: url(/backlol.jpg);
font-family: Arial, Helvetica, sans-serif;
font-size: 73%;
color: #999;
line-height: 1.4em;
}
h1 {
font-size: 150%;
color: #84C225;
}
h2 {
color: #84C225;
font-size: 130%;
}
h3 {
color: #84C225;
font-size: 110%;
}
h4 {
color: #84C225;
font-size: 100%;
}
a:link , a:visited, a:active{
color: #84C225;
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #FFF;
background-color: #84C225;
}


#container {
width: 850px;
margin: 0 auto;
background-color: #FFF;
box-shadow: #333 0 0 15px;
}
#header {
height: 125px;
width: 850px;
margin: 30px auto;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-position: right top;
background-color: #FFF;
box-shadow: #333 0 0 15px;
}
#header ul {
list-style: none;
margin: 0px;
float: left;
padding-top: 25px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 130px;
}
#header li {
padding-right: 1em;
float: left;
}
#header a:link, #header a:visited {
color: #666;
text-decoration: none;
text-transform: uppercase;
font: 0.95em Tahoma, Arial, geneva, sans-serif;
}
#header a:hover {
background-color: #84C225;
color: #FFF;
}

 

#content {
float: right;
width: 600px;
padding-top: 15px;
padding-right: 10px;
padding-bottom: 30px;
padding-left: 0px;

}
#center {
float: left;
width: 500px;
}

#left {
width: 200px;
padding-top: 0px;
padding-bottom: 300px;
text-align: right;
}
#left ul {
list-style: none;
text-align: right;
padding-top: 0px;
padding-bottom: 5px;
width: 150px;
float: right;
font-size: 110%;
}
#left ul a:link, #left ul a:visited {
color: #666;
text-decoration: none;
display: block;
font-weight: bold;
}
#left ul a:hover {
color: #FFF;
background-color: #84C225;
}


#footer {
height: 50px;
width: 750px;
margin: 0 auto;
text-align: right;
color: #FFFFFF;
clear: both;
font-size: 0.9em;
padding: 0px;
}
#copyright {
text-align: center;
padding-top: 15px;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
color: #999;
}
#current {
text-decoration: underline;
}

 

http://jsfiddle.net/ заведи мне облака здесь?

и где в твоем css класс clouds?



14 сен 2014, 20:46
Профиль

0
Сообщение CSS, анимация неба

ну я же говорю, добавляю, и все равно



14 сен 2014, 20:47
Профиль

0
Сообщение CSS, анимация неба

Ты забыл 

 

@-webkit-keyframes clouds {
100% {
background-position: -2178px; } }
@-moz-keyframes clouds {
100% {
background-position: -2178px; } }
@keyframes clouds {
100% {
background-position: -2178px; } }

 

http://jsfiddle.net/yefnxg7t/

 



14 сен 2014, 20:54
Профиль

0
Сообщение CSS, анимация неба

Спасибо, как я понял ты дописал сам ключи, а где эти ключи в ксс автора? Смотрю его и их там нет?!



14 сен 2014, 20:58
Профиль

0
Сообщение CSS, анимация неба

Сонистар писал(а):

Спасибо, как я понял ты дописал сам ключи, а где эти ключи в ксс автора? Смотрю его и их там нет?!

http://take.ms/oQLQh

 



14 сен 2014, 20:59
Профиль

0
Сообщение CSS, анимация неба

в след. раз буду искать по всему ксс нужный мне класс сразу, вообще не додумался прожать ктрл f и прописать clouds :D



14 сен 2014, 21:03
Профиль
Начать новую тему Ответить на тему


Перейти:  

На сайте использованы материалы, принадлежащие Blizzard Entertainment. Копирование материалов возможно только c разрешения портала. В противном случае это будет называться уже другим словом.
Рейтинг@Mail.ru