Comment obtenir un effet d'animation de transition en CSS3 ? Comment implémenter l'effet de transition CSS3-tutoriel CSS-php.cn

Comment obtenir un effet d'animation de transition en CSS3 ? Comment implémenter l'effet de transition CSS3

不言

Libérer： 2018-09-12 14:24:25

original

4851 Les gens l'ont consulté

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>

Copier après la connexion

Enfin, jetons un coup d'œil à l'effet de transition CSS3 :

Processus d'effet de transition CSS3 :

Comment obtenir un effet danimation de transition en CSS3 ? Comment implémenter leffet de transition CSS3

Résultat de l'effet de transition CSS3 :

Comment obtenir un effet danimation de transition en CSS3 ? Comment implémenter leffet 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment obtenir un effet d'animation de transition en CSS3 ? Comment implémenter l'effet de transition CSS3