recherche

Maison >programmation quotidienne >connaissance CSS >Comment obtenir l'effet d'allongement lorsque la souris monte en CSS3 ? (Photos, texte + vidéo)

Comment obtenir l'effet d'allongement lorsque la souris monte en CSS3 ? (Photos, texte + vidéo)

藏色散人
藏色散人original
2018-10-19 16:00:136599parcourir

Cet article présente principalement comment utiliser css3 pour obtenir l'effet de changer la longueur de la souris lors du déplacement dans .

Dans la conception de pages frontales, la fonction CSS est extrêmement puissante. Tant que vous l'utilisez bien, vous pouvez obtenir divers effets dynamiques merveilleux sur de nombreux sites Web. Ainsi, dans l'article précédent, j'ai également partagé avec vous quelques méthodes d'utilisation de CSS pour réaliser des effets d'animation, telles que [Comment réaliser des effets de rotation et de mouvement dans une animation CSS3 ? ] [Comment obtenir l'effet d'agrandissement lent des images lors du survol de la souris en CSS3 ?] et d'autres points de connaissances sont introduits. Les amis dans le besoin peuvent choisir de s'y référer.

Ci-dessous, nous combinerons un exemple de code simple pour vous présenter la méthode CSS3 permettant d'obtenir l'effet selon lequel le div devient plus long lorsque la souris se déplace dans le div. 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Css3实现鼠标移上变长特效</title>
<head>
    <style>
.hover{
    width: 200px;
    height: 200px;
    border-radius: 10px;
    background: red;
    margin-top: 100px;
    margin-left: 100px;
    transition: width 2s;
}
        .hover:hover{
            background: blue;
            width: 500px;
        }
 </style>
</head>
<body>

<div class="hover">
    hover
</div>
</body>
</html>

En fait, cet effet est très basique et simple. Maîtriser principalement l'utilisation du :hover selector et de la transition.

:hover selector permet de sélectionner l'élément sur lequel flotte le pointeur de la souris.

Transition transition est un attribut composite, comprenant les quatre sous-propriétés de transition-property, transition-duration, transition-timing-function et transition-delay. Grâce à la coopération de ces quatre sous-attributs pour compléter un effet de transition complet

L'effet obtenu par le code ci-dessus au premier plan est le suivant :

Comment obtenir leffet dallongement lorsque la souris monte en CSS3 ? (Photos, texte + vidéo)

Cet article Cet article concerne la méthode CSS3 pour réaliser l'effet de longueur variable avec la souris C'est également très simple. J'espère qu'il sera utile aux amis dans le besoin !

Si vous souhaitez en savoir plus sur les connaissances liées au front-end, vous pouvez suivre le site Web PHP chinois Tutoriel vidéo CSS3, Tutoriel vidéo CSS, Tutoriel Bootstrap , etc. Tutoriels associés, tout le monde est invité à se référer et à étudier !

D'autres codes d'effets spéciaux CSS3, html5 et javascript sont disponibles sur : Collection d'effets spéciaux Javascript

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter des effets d'animation de rotation et de mouvement en CSS3Article suivant：Comment implémenter des effets d'animation de rotation et de mouvement en CSS3

Articles Liés

Voir plus