Плавающая картинка для Blogger, Блогспот!




Фавикон у Blogger Пост (в основном) для пользователей:

Было дело как то "смастырил" я плавающую картинку. Не помню уже как, помню только обошлось мне это бессонную ночь на выходные. Короче методом тыка, однако работает!
Этот блог перегружен скриптами, так что пришлось это дело выпилить. Но для любителей экзотики, может даже очень пригодиться!

Как это выглядит, вы можете посмотреть демо по этой ссылке: 
http://blogodel-test.blogspot.com/2012/11/blog-post_16.html

<style type="text/css">
#holder {
  margin:50px auto;
  -webkit-perspective:200px;
  -moz-perspective:200px;
  text-indent: 0px;
}

.box {
  position: relative;
  margin: 0 auto;
  height: 200px;
  width: 200px;
  -webkit-animation: spin 20s infinite linear;
  -moz-animation: spin 20s infinite linear;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.box div {
  position: absolute;
  height: 0px;
  width: 0px;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
  opacity:0.8;
  -webkit-animation:rotate 15s infinite linear;
  -moz-animation:rotate 15s infinite linear;
}

.box div img {width:100px; height:100px;
  border-radius:0px;
  -webkit-animation:rot 10s infinite linear;
  -moz-animation:rot 10s infinite linear;
  padding: 0;background: #ffffff;
float: left;
margin: 0 10px 0 0;
padding: 4px;
border: 0px solid #b0aeae;
}

.box div.side1 {
  background:transparent;
  -webkit-transform:translatez(100px);
  -moz-transform:translatez(100px);
}


@-moz-keyframes spin {
  0% {-moz-transform: rotatex(0deg) rotatey(0deg);}
  100% {-moz-transform: rotatex(1080deg) rotatey(360deg);}
}
@-webkit-keyframes spin {
  0% {-webkit-transform: rotatex(0deg) rotatey(0deg);}
  100% {-webkit-transform: rotatex(1080deg) rotatey(360deg);}
}
@-moz-keyframes rot {
  0% {-moz-transform: rotate(0deg);}
  100% {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes rot {
  0% {-webkit-transform: rotate(0deg);}
  100% {-webkit-transform: rotate(360deg);}
}
</style>


<br />
<div id="holder">
<div class="box">
<div class="side1">
<img border="0" src="http://1.bp.blogspot.com/-2gDaRWu60HM/UKZHJnLihSI/AAAAAAAACD0/2QMWea8_faY/s1600/Google-Blogger-32+(3).png" /></div>
</div>

 
Можно поменять параметры по желанию. Коричневый цвет - размеры картинки.  Зеленый - размеры и цвет рамки. Красный - урл. вашей картинки. Вот такой цвет ............. (не знаю как называется) - прозрачность картинки. Код вставляется прямо в текстовый редактор (блоггер-блогспот).

7 коммент.:

Александр Кувшинников
Justus
Анна Анатольевна Гончарова
Justus
Lanvin
Великий Царь
Великий Царь

Отправить комментарий

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!