Bulles d'image en utilisant CSS3 transformer et transitions ~ aw ! web LE PARTAGE

Bulles d'image en utilisant CSS3 transformer et transitions

CSS3 est de transformer et de transition, les propriétés permettent de manipuler des éléments dans une variété de façons en utilisant seulement CSS. CSS transformer est utilisé pour redimensionner, faire pivoter ou même biaiser un élément sans perturber le contenu autour de lui, tandis que la transitionest utilisé pour animer des propriétés CSS dans la vue. Les deux propriétés sont pris en charge dans les versions modernes de Safari, Chrome, Mozilla 3.5 + et Opera 9.5 + à des degrés divers. Après cette brève introduction de la route, les utilisations suivantes de CSS3 transformer et de transition, les propriétés de "gonflent" une image lorsque la souris survole, et il reviendra à son état original quand est sorti de:

/*noter :

<style type="text/css">

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

</style>

<ul class="bubblewrap">

</ul>

Posted in: blogger image html css

aw ! web LE PARTAGE

What is JavaScript?

Difference betwen Java & JavaScript?

What is DHTML?

Bulles d'image en utilisant CSS3 transformer et transitions

0 commentaires:

Libellés

Nombre total de pages vues

Archives du blog

Blogger Tricks

Connect With Us

Recomended

Instructions