Maison >interface Web >tutoriel CSS >Utilisez CSS3 pour animer des éléments de page Web à travers des styles
Utilisez CSS3 pour animer des éléments de page Web à travers des styles
- 零下一度original
- 2017-04-22 13:41:222320parcourir
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;
}Écrivez
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="demo.css"/> </head> <body> <p></p> </body> </html>
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>
$('p').hover(function(){
$('p').addClass('over');},
function(){
$('p').removeClass('over');
});
</script>
</body>
</html>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;}
} pour définir une animation d'image clé puis la lier à un élément à appliquer, tel que : p{
animation:chgbackground 3s;
}Nous utilisons l'animation pour lier. Les attributs de cet élément sont : @frames chgbackground{
0%{background:yellow;}
50%{background:red;}
100%{background:black;}
}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 :
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!