Utilisez CSS3 pour animer des éléments de page Web à travers des styles-tutoriel CSS-php.cn

Utilisez CSS3 pour animer des éléments de page Web à travers des styles

零下一度

Libérer： 2017-04-22 13:41:22

original

2313 Les gens l'ont consulté

En utilisant CSS3, vous pouvez animer des éléments Web à travers des styles sans utiliser Javascript ni Flash, ce qui rend le site Web plus cool.

transition css3

L'attribut trainsition peut être utilisé pour styliser l'élément Les navigateurs pris en charge par la formation incluent ie10, Firefox, Chrome et Opera.

Regardons d'abord plusieurs propriétés de trainsition :

trainsition-property : spécifie le nom de l'attribut CSS de la transition d'application.

trainsition-duration : Spécifie le temps excessif passé.

trainsiton-timing-function : Spécifie la courbe de temps de transition

trainsition-delay : Spécifie quand la transition commence.

Regardez d'abord un exemple de transition simple, écrivez

p{
width:100px;
height:100px;
background:red;
trainsition:width 3s,height 2s;//在这里为了方便，将过渡属性简写了，我们可以将过渡属性简写为trainsition:加上上面四个属性，可以把默认属性省略。
}

p:hover
{
width:300px;
height:200px;
}

Copier après la connexion

<🎜 dans demo.css > Écrivez

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"  href="demo.css"/>
</head>
<body>

<p></p>

</body>
</html>

Copier après la connexion

dans demo.html Déplacez la souris sur le bloc p rouge et vous pouvez voir que la longueur et la largeur du bloc rouge augmentent lentement. mise en œuvre la plus simple de la transition.

Remarque : Si le temps de transition n'est pas défini, il sera de 0 par défaut. Il n’y a tout simplement aucun effet de transition.

La méthode que nous utilisons le plus souvent consiste à ajouter des styles via js pour pratiquer diverses transitions d'animation, comme suit :

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<style>
p{
   background:red;
   width:200px;
   height:200px;
   transition:width 2s,height 2s;
}
p.over{
width:300px;
height:300px;
}
</style>
</head>
 
<body>
<p 
</p>
<script> 
$(&#39;p&#39;).hover(function(){
  $(&#39;p&#39;).addClass(&#39;over&#39;);},
  function(){
    $(&#39;p&#39;).removeClass(&#39;over&#39;);
});
</script> 
</body>
</html>

Copier après la connexion

Dans le code modifié, jquery a été utilisé pour ajouter le style de survol lorsque la souris se déplace dessus, et le style de survol a été supprimé lorsque la souris est partie puisque l'attribut de transition a été défini dans le p. style, l’animation de transition a été implémentée.

Cependant, bien que le changement de style soit implémenté ci-dessus, nous pouvons voir que le changement se fait d'un état initial à un état final, et les limitations sont très grandes , nous espérons donc qu’il y aura un état intermédiaire de transformation. À ce stade, l'animation d'images clés (@keyframes) sera utilisée :

Le format de base est :

@keyframes Name｛

Point temporel｛Statut de l'élément｝

....

｝

Par exemple, nous pouvons utiliser

@frames chgground{
    from{ backgroud:red;}
    to{backgroud:yellow;}
}

Copier après la connexion

pour définir une animation d'image clé puis la lier à un élément à appliquer, tel que :

p{
animation:chgbackground 3s;
}

Copier après la connexion

Nous utilisons l'animation pour lier. Les attributs de cet élément sont :

p Ensuite, nous avons l'animation de chgbackground. Nous pouvons également utiliser le pourcentage pour spécifier l'état de l'image clé, de à est 0. % et %100, le code suivant

@frames chgbackground{  
0%{background:yellow;}  
50%{background:red;}  
100%{background:black;}  
}

Copier après la connexion

t utilise ce code pour obtenir différents effets de dégradé de l'arrière-plan de 0% à 50% et de 50% à 100%.

Pour utiliser animate.css, téléchargez simplement animate.css et référencez le fichier, puis ajoutez des noms de classes d'animation spécifiques si nécessaire pour obtenir divers effets, tels que :

< ;script>$( 'p').addClass('shake');Vous pouvez facilement ajouter des effets de tremblement d'élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!