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

 Пост (в основном) для пользователей:

Blogger, Блоггер (Blogspot, Блогспот).

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

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

Как это выглядит, вы можете посмотреть демо по этой ссылке: 

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>

 

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

 

Кроме того я рекомендую: "качающуюся" картинку, которая увеличивается при наведении курсора.