Попробуйте открыть эти демо-страницы в одном из современных браузеров. Для наилучшего результата я советую вам использовать Chrome.
Демо 1 | Демо 2 | Демо 3
Код javascript
$(".square").click(function(){}) - "square" – это имя класса тэга DIV. $(this).animation() и $(this).addClass() – применение анимации и стилей класса.
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="easing.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".square").click(function()
{
$(this).animate({width:'100px',height:'100px'}, 500, 'linear', function()
{
$(this).addClass('circle-label-rotate');
}).addClass('circle').html('<div class="innertext">Bye</div>').animate({"opacity":"0","margin-left":"510px"},1500);
$(this).slideUp({duration: 'slow',easing: 'easeOutBounce'}).hide();
});
});
</script>
HTML код блоков
<div class='square'>1</div>
<div class='square'>2</div>
<div class='square'>3</div>
Круг
Диаметр круга в CSS3 – 50 пикселей.
.circle
{
border-radius: 50px; // Chrome & IE9
-moz-border-radius: 50px; // Firefox
-webkit-border-radius: 50px; // Safari
height:100px;
width:100px;
background:#dedede;
}
Вращение
CSS3 вращение 0 - 360 градусов
@-webkit-keyframes rotateThis
{
from {-webkit-transform:scale(1) rotate(0deg);}
to {-webkit-transform:scale(1) rotate(360deg);}
}
.circle-label-rotate
{
-webkit-animation-name: rotateThis;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
Прямоугольник
Содержит CSS-код.
.square
{
height:100px;
width:500px;
border:dashed 1px #000;
margin-top:10px;
}
Внимание! У вас нет прав для просмотра скрытого текста.