Maison >interface Web >tutoriel CSS >Comment obtenir un effet d'animation de transition en CSS3 ? Comment implémenter l'effet de transition CSS3
Parfois, nous pouvons constater un tel effet sur une page Web. Lorsque la souris est placée sur certains textes ou images, il s'agit en fait d'une transition. C'est donc relativement abstrait. se produit. Introduisons l'effet d'animation de la transition CSS3.
La transition CSS3 est indissociable de l'attribut transition. La transition est une animation de transition sur une page Web. L'effet de transition progressive des changements est appelé animation de transition.
Voyons donc comment l'attribut de transition de CSS3 implémente spécifiquement l'effet de transition.
Tout d'abord, examinons la définition et l'utilisation de l'attribut de transition :
L'attribut de transition est un attribut abrégé utilisé pour définir quatre attributs de transition. .
transition-property : spécifie le nom de la propriété CSS qui définit l'effet de transition.
transition-duration : Spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'effet de transition.
transition-timing-function : Spécifie la courbe de vitesse de l'effet de vitesse.
transition-delay : Définit le moment où l'effet de transition commence.
Après avoir lu la brève introduction à la définition et à l'utilisation de l'attribut de transition.
Jetons maintenant un coup d'œil à un code CSS3 pour obtenir un effet de transition :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>小效果</title>
<style type="text/css">
/*通配符重置浏览器默认的两个值，
对本文没有太大影响，不知道可以无视*/
*{
margin: 0;
padding: 0;
}
.div1{
width: 400px;
height: 100px;
padding-top: 20px;
line-height: 100px;
margin:200px auto 0;
text-align: center;
font-size: 40px;
font-weight: bold;
font-family: "华文行楷";
background: #000;
color:#F60;
transition-property: all;/*变化的东西。all是所有*/
transition-duration: 1s;/*变化过程的时间*/
transition-timing-function: linear;/*linear是匀速变化*/
transition-delay: 0s;/*没有延迟变化*/
/*下面的是简写属性*/
/*
transition:all 1s linear 0s;
*/
}
.div1:hover{
text-shadow: 0px 0px 2px #fff,
0px -3px 3px #1EB,
0px -6px 4px #01DEFD,
0px -9px 5px #0BF,
0px -12px 6px #08F;
}
</style>
</head>
<body>
<div>PHP中文网火焰字</div>
</body>
</html>Enfin, jetons un coup d'œil à l'effet de transition CSS3 :
Processus d'effet de transition CSS3 :
Résultat de l'effet de transition CSS3 :
À propos de pour plus d'utilisation de l'attribut de transition, veuillez vous référer au Manuel d'apprentissage CSS3.
Recommandations associées :
Effets de transition d'image 3D implémentés à l'aide de CSS3 animation_html/css_WEB-ITnose
À propos de CSS3 Utiliser la transition attribut pour obtenir des effets de transition
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!