Четверг, 25 Октября 2012 12:50

WebKit CSS Transition

Written by 
Оцени эту запись
(1 Голос)

Свойство -webkit-transition для WebKit браузеров (Chrome, Safari) позволяет анимировать элемент при изменении его состояния - :hover, :focus, :active. Изменению поддаются свойство, которые выражается в численном эквиваленте - размеры, отступы, цвет. Есть аналог данного свойства для Firefox - -moz-transition.

 

 

Пример:

 

.button {color: red;}

.button:hover {color: blue;}

 

У элемента с классом button будет красный цвет текста, который при наведении сменится на синий. В свойстве -webkit-transition и в его родственных свойствах вы можете задавать задержку изменения, продолжительность изменения, свойство и вид. Через запятую можно задавать изменения нескольких свойств.

 

-webkit-transition: свойство продолжительность метод задержка;

-webkit-transition-property: свойство;

-webkit-transition-duration: продолжительность (в секундах s);

-webkit-transition-timing-function: ease | ease-in | ease-out | linear | ease-in-out | cubic-bizier;

-webkit-transition-delay: задержка (в секундах);

 

Примеры:

 

1. Красивая кнопочка.

 

У кнопки при наведении изменяются фон, граница и цвет текста:

 

 

 

 

<div class="example1">
        <a>My Nice Button</a>
</div>
<style>
.example1 {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            -webkit-box-align: center;
        }
        .example1 a {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            width: 150px;
            height: 50px;
            -webkit-border-radius: 10px;
            -webkit-transition: background-position 2s ease-out 0s, text-shadow 2s ease-out 0s, color 2s linear 0s, border 2s linear 0s;
            background-image: -webkit-linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
            -webkit-background-size: 200%;
            background-position: 0 0;
            color: blue;
            text-shadow: 1px 1px 3px blue;
            border: 2px solid yellow;
            -webkit-box-shadow: inset -1px -1px 3px 1px blue;
            cursor: pointer;
        }
        .example1 a:hover {
            background-position: -150px 0;
            color: yellow;
            text-shadow: 1px 1px 3px yellow;
            border: 2px solid blue;
        }
</style>

 

 

2. Красивый просмотр фотографий.

 

При наведении на фото, оно увеличивается и приближается к центру. Подпись в фото привязывается при помощи псевдоэлемента :after, куда выводится значение атрибута attr-title.

 

 
 
 
 
 
 
 
 
 

 

 

Здесь мы каждой картинке при помощи :nth-child и свойства -webkit-transform задаем свой угол наклона, который обнуляем при наведении, scale для увеличения при наведении и translate(0,0), которое при наведении будем менять, чтобы подвинуть картинку ближе к центу.

 .example2 div {

-webkit-transition: -webkit-transform 2s linear 0s, -webkit-box-shadow 1s linear 0s, z-index 0s linear 0s;

}

 

.example2 div:nth-child(1) {
 -webkit-transform: rotate(-30deg) scale(1, 1) translate(0, 0);
 }

 

 

.example2 div:nth-child(1):hover {
 -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(220px, 75px);
}
 
Добавляем описание фотографии:
 .example2 div:after {
content: attr(attr-title);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background: white;
}
 

 

 

<div class="example2">
        <div style="background-image: url('/slider/images/img1.jpg')"></div>
        <div style="background-image: url('/slider/images/img2.jpg')"></div>
        <div style="background-image: url('/slider/images/img3.jpg')"></div>
        <div style="background-image: url('/slider/images/img4.jpg')"></div>
        <div style="background-image: url('/slider/images/img5.jpg')"></div>
        <div style="background-image: url('/slider/images/img6.jpg')"></div>
        <div style="background-image: url('/slider/images/img7.jpg')"></div>
        <div style="background-image: url('/slider/images/img8.jpg')"></div>
    </div>
<style>
.example2 {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            -webkit-box-lines: multiple;
            background-color: blue;
            background-image: -webkit-linear-gradient(transparent 50%, rgba(0, 0, 200, .5) 50%, rgba(0, 0, 200, .5)),
            -webkit-linear-gradient(0deg, transparent 50%, rgba(200, 200, 200, .5) 50%, rgba(250, 250, 250, .5));
            background-size: 20px;
            width:935px;
            margin: 20px auto;
        }
        .example2 div {
            display:-webkit-inline-box;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            -webkit-box-flex: 0;
            background-size: 100% 100%;
            width: 200px;
            height: 250px;
            position: relative;
            border: 5px solid white;
            margin: 10px;
            -webkit-transition: -webkit-transform 2s linear 0s, -webkit-box-shadow 1s linear 0s, z-index 0s linear 0s;
            -webkit-box-shadow: 0 0 1px 1px blue;
            position: relative;
            z-index: 1;
            cursor: pointer;
        }
        .example2 div:after {
            content: attr(style);
            display:-webkit-inline-box;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 50px;
            background: white;
            color: blue;
            -webkit-box-orient: vertical;
            -webkit-box-pack: center;
            text-align:  center;
            border-top: 1px dotted blue;
        }
        .example2 div:nth-child(1) {
            -webkit-transform: rotate(-30deg) scale(1, 1) translate(0, 0);
        }
        .example2 div:nth-child(2) {
            -webkit-transform: rotate(15deg) scale(1, 1) translate(0, 0);
        }
        .example2 div:nth-child(3) {
            -webkit-transform: rotate(-50deg) scale(1, 1) translate(0, 0);
        }
        .example2 div:nth-child(4) {
            -webkit-transform: rotate(15deg) scale(1, 1) translate(0, 0);
        }
        .example2 div:nth-child(5) {
            -webkit-transform: rotate(-60deg) scale(1, 1) translate(0, 0);
        }
        .example2 div:nth-child(6) {
            -webkit-transform: rotate(20deg) scale(1, 1) translate(0, 0);
        }
        .example2 div:nth-child(7) {
            -webkit-transform: rotate(-15deg) scale(1, 1) translate(0, 0);
        }
        .example2 div:nth-child(8) {
            -webkit-transform: rotate(45deg) scale(1, 1) translate(0, 0);
        }
        .example2 div:hover {
            /*-webkit-transform: rotate(0deg) scale(1.7, 1.7);*/
            -webkit-box-shadow: 0 0 5px 1px blue;
            z-index: 2;
        }
        .example2 div:nth-child(1):hover {
            -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(220px, 75px);
        }
        .example2 div:nth-child(2):hover {
            -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(75px, 75px);
        }
        .example2 div:nth-child(3):hover {
            -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(-75px, 75px);
        }
        .example2 div:nth-child(4):hover {
            -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(-180px, 75px);
        }
        .example2 div:nth-child(5):hover {
            -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(220px, -75px);
        }
        .example2 div:nth-child(6):hover {
            -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(75px, -75px);
        }
        .example2 div:nth-child(7):hover {
            -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(-75px, -75px);
        }
        .example2 div:nth-child(8):hover {
            -webkit-transform: rotate(0deg) scale(1.7, 1.7) translate(-180px, -75px);
        }
</style>
 

 

 

 

 

3. Кнопка с подсказкой.

 

При наведении на кнопку появляется блок с подсказкой/пояснением. 

Button with Hint

 

 

<div class="example3">
        <div><span class="visible">Button with Hint<span class="hidden">Hint</span></div>
    </div>
<style>
.example3 {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-pack: center;
            -webkit-box-align: center;
            margin-top: 50px;
        }
        .example3 div {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            width: 250px;
            height: 50px;
            background: darkblue;
            background-size: 50%;
            position: relative;
            -webkit-appearance: none;
            border: 2px solid darkblue;
            -webkit-box-shadow: inset -1px -1px 2px 0 #4949eb;;
            -webkit-border-radius: 20px;
            color: lightblue;
            font-size: 1.3em;
            font-weight: bold;
            text-shadow: 1px 1px 6px darkblue;
            letter-spacing: 0;
            text-align: center;
            -webkit-transition: left 10s linear 0s;
            overflow: hidden;
            cursor: pointer;
        }
        .example3 div span {
            display: -webkit-box;
            -webkit-box-orient: horizontal;
            -webkit-box-align: center;
            -webkit-box-pack: center;
            height: 100%;
            -webkit-transition: width 1s linear 0s, -webkit-border-radius 1s linear 0s, border 1s linear 0s;
        }
        .example3 div span.hidden {
            position: absolute;
            top: 0;
            right: 0;
            width: 0;
            -webkit-border-radius: 0 100px 100px 0;
            color: lightblue;
        }
        .example3 div:hover span.hidden {
            width: 30%;
            -webkit-border-radius: 0 20px 20px 0;
            border-left: 1px solid darkblue;
        }
        .example3 div span.visible {
            width: 100%;
            background-image: -webkit-linear-gradient(90deg, darkblue, #4949eb, darkblue);
            -webkit-box-shadow: inset -2px 2px 10px 1px darkblue;
            -webkit-border-radius: 20px;
        }
        .example3 div:hover span.visible {
            -webkit-border-radius: 20px 0 0 20px;
            width: 70%;
            -webkit-box-shadow: inset 0 0 0 0 darkblue;
            border-right: 1px solid blue;
        }
</style>
 

 

 

 

 

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов