Главная » Статьи » Прочее

Анимационное Солнце на чистом CSS by slavick


Вот решил позаниматься с анимацией на CSS

Вот ДЕМО

Просто наведите на него курсор и увидите Чудо!

А если хотите себе вставить

то

Это в то место где будет солнце
Код

<div id="block"><div id="block"><div id="block"><div id="block"><div id="block"> <div id="block"> <div id="block1"></div> </div></div> </div> </div></div></div>  


А это в CSS

Код

#block {  
  background: rgb(255,183,107); /* Old browsers */  
background: -moz-linear-gradient(-45deg, rgba(255,183,107,1) 0%, rgba(255,167,61,1) 50%, rgba(255,124,0,1) 51%, rgba(255,127,4,1) 100%); /* FF3.6+ */  
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(255,183,107,1)), color-stop(50%,rgba(255,167,61,1)), color-stop(51%,rgba(255,124,0,1)), color-stop(100%,rgba(255,127,4,1))); /* Chrome,Safari4+ */  
background: -webkit-linear-gradient(-45deg, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%); /* Chrome10+,Safari5.1+ */  
background: -o-linear-gradient(-45deg, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%); /* Opera 11.10+ */  
background: -ms-linear-gradient(-45deg, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%); /* IE10+ */  
background: linear-gradient(135deg, rgba(255,183,107,1) 0%,rgba(255,167,61,1) 50%,rgba(255,124,0,1) 51%,rgba(255,127,4,1) 100%); /* W3C */  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb76b', endColorstr='#ff7f04',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  

  width:300px;  
  height:300px;  
  transition-duration:9.0s;  
  margin-top:60px;  
margin-left:auto;  
  margin-right:auto;  
  box-shadow: 0 0 15px 0 #969696;  
  border-radius:15px;  
   
}  
#block:hover {  
  -webkit-transform: rotate(90deg);; /* Для Safari и Chrome */  
  -moz-transform: rotate(90deg);; /* Для Firefox */  
  -o-transform: rotate(90deg);; /* Для Opera */  
  -ms-transform: rotate(90deg);; /* Для IE */  
  transform: rotate(90deg);; /* CSS3 */  
   
   
}  

#block1 {  
   
background: rgb(252,234,187); /* Old browsers */  
background: -moz-linear-gradient(-45deg, rgba(252,234,187,1) 0%, rgba(252,205,77,1) 50%, rgba(248,181,0,1) 51%, rgba(251,223,147,1) 100%); /* FF3.6+ */  
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(252,234,187,1)), color-stop(50%,rgba(252,205,77,1)), color-stop(51%,rgba(248,181,0,1)), color-stop(100%,rgba(251,223,147,1))); /* Chrome,Safari4+ */  
background: -webkit-linear-gradient(-45deg, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Chrome10+,Safari5.1+ */  
background: -o-linear-gradient(-45deg, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* Opera 11.10+ */  
background: -ms-linear-gradient(-45deg, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* IE10+ */  
background: linear-gradient(135deg, rgba(252,234,187,1) 0%,rgba(252,205,77,1) 50%,rgba(248,181,0,1) 51%,rgba(251,223,147,1) 100%); /* W3C */  
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  

  width:295px;  
  height:295px;  
  margin-top:60px;  
margin-left:auto;  
  margin-right:auto;  
  box-shadow: 0 0 15px 0 #969696;  
  border-radius:150px;  
   
}  
#text {  
  position:relative;  
  left:120px;  
  top:140px;  
}
Категория: Прочее | Добавил: slavick (03.09.2013)
Просмотров: 233 | Теги: css, slavick, Солнце, анимационное, чистом, By, на | Рейтинг: 1.0/2
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]