Comment créer un effet flash CSS3 lorsque la souris glisse sur une image sur le front-end

Il y a deux ou trois ans, frère Ji a fait la première page de ce site alors qu'il était encore étudiant. En fait, ce site a maintenant de nombreux prédécesseurs. J'ai l'occasion de poster un article pour montrer à tout le monde à quel point il est jeune. et ignorant il l'était avant. Travail spécial...
D'accord, aujourd'hui, nous allons parler de la façon de créer un effet clignotant réfléchissant lorsque la souris glisse sur l'image. J'ai découvert cet effet par hasard en faisant mes achats sur JD. com. Jetez un œil à la démonstration du produit fini ci-dessous : Sinon, c'est gênant de parler longtemps et de ne toujours pas savoir quel effet faire. Oh, au fait, comment s'appelle cette situation ? "Chat gênant"



Comme vous pouvez le voir, l'article d'aujourd'hui explique comment obtenir cet effet
- Ps : les personnes ayant une petite base HTML le comprendront facilement, si vous n’avez pas les bases, cela peut paraître plus difficile.
Publiez d'abord le code :

<div><a><img  alt="Comment créer un effet flash CSS3 lorsque la souris glisse sur une image sur le front-end" ></a></div>

Ce ci-dessus est le code en html, ce n'est pas grand chose, c'est relativement simple, l'accent est mis sur le dos Le code CSS doit être soigneusement lu et analysé en référence à de nombreux points de connaissances CSS3

div{width:800px;height:600px;overflow:hidden;}                  /div宽度和高度 超出隐藏
div a:hover::before{transition: all 0.5s;left:850px;}               /css3过度样式  before离左边850像素
div a:before{content: "";                  
    position: absolute;width: 50px;height: 600px;top: 0;left: -130px;background: -moz-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -webkit-gradient(linear,left top,right top,color-stop(0%,rgba(255,255,255,0)),color-stop(50%,rgba(255,255,255,.2)),color-stop(100%,rgba(255,255,255,0)));background: -webkit-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);background: -o-linear-gradient(left,rgba(255,255,255,0)0,rgba(255,255,255,.2)50%,rgba(255,255,255,0)100%);-webkit-transform: skewX(-25deg);-moz-transform: skewX(-25deg);}              /这里是给反光加样式的css3代码，就不一一解释了

Ce qui précède est le code de style CSS, Brother Ji a simplement écrit une démo pour la montrer à tout le monde. En fait, le code de style réfléchissant derrière a également été copié par Brother Ji. J'ai oublié de le terminer, donc je ne peux que le copier. Si vous ne comprenez pas, vous pouvez Baidu. Si vous ne comprenez pas le code, vous pouvez le comprendre dans Baidu.

La théorie spécifique est d'ajouter un calque transparent au-dessus de la balise a et de l'appuyer sur la balise a via le positionnement. Ce calque transparent est l'avant dans le code ci-dessus. Bien sûr, il peut également s'agir de n'importe quelle autre balise. . Tout le monde J'ai des habitudes différentes, puis j'utilise la souris CSS3 pour faire glisser le calque transparent vers la droite grâce à un style excessif pour obtenir cet effet réfléchissant.

D'accord, la méthode spécifique a été partagée avec vous. Si vous souhaitez l'utiliser dans votre propre projet, vous devez avoir des connaissances de base en html+css, sinon ce sera difficile de le faire.

Ci-dessous, j'ai emballé la démo que je viens d'écrire. Si vous ne la comprenez pas bien, vous pouvez la télécharger et l'étudier attentivement.

Lien original : Comment créer un effet flash CSS3 lorsque la souris glisse sur l'image du front end ?

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!