
Было дело как то "смастырил" я плавающую картинку. Не помню уже как, помню только обошлось мне это бессонную ночь на выходные. Короче методом тыка, однако работает!
Этот блог перегружен скриптами, так что пришлось это дело выпилить. Но для любителей экзотики, может даже очень пригодиться!
Как это выглядит, вы можете посмотреть демо по этой ссылке:
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>
8 коммент.:
https://www.blogger.com/profile/12011472871925373280
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/05164203846849848409
https://www.blogger.com/profile/13746790384341325111
https://www.blogger.com/profile/09375860885710277222
Все плавно и круто. Картинку поменял, место входа кода в виджет поменял (нижний левый) - бомба!
Хотя именно для фавикона в углу фавикона это конечно мало подходит - "разлет" шибко большой (может радиус полета регулировать можно, тогда и на фавикон пойдет, если уменьшить).
А в качестве фишки - прямо красота: любое изображение можно ставить и оно летает! ))
Полный респект всем причастным к появлению этого "планера".
https://www.blogger.com/profile/09375860885710277222
порно скачать бесплатно
Отправка комментария
Дорогие Друзья! К сожалению, по причине здоровья, моя активность по этому блогу будет осуществляться по мере ВОЗМОЖНОСТИ!