Utilisation intelligente du tutoriel CSS MASK filter_Basic

Le filtre Masque peut créer un masque rectangulaire pour l'objet élément HTML sur la page Web. Qu'est-ce qu'un masque ? Si vous avez utilisé des masques dans Flash, vous saurez que c'est comme ça. En fait, on peut aussi comprendre le masquage de cette manière, qui équivaut à recouvrir l'objet d'un morceau de tissu coloré, mais dont le contenu est déterré. Si vous ne comprenez toujours pas, regardez simplement l’image ci-dessous et laissez-moi vous l’expliquer en détail.

Figure 1 Effet de filtre de masque 1

L'utilisation d'une couleur aussi sombre dans le filtre de masque ci-dessus vise principalement à ce que vous puissiez voir clairement l'effet. Jetons un coup d'œil aux paramètres du filtre de masque : Il n'a qu'un seul paramètre Color, qui est la valeur de couleur du masque au format #RRGGBB. Il vous suffit de choisir une couleur appropriée dans DW3. Par exemple, le code du filtre de masque ci-dessus est : .mask1 { filter:mask(color=#00ff00) }. la couleur du filtre n’est pas l’essentiel, la clé est la couleur de l’arrière-plan.
Ensuite, nous utilisons le filtre de masque pour créer plusieurs effets spéciaux :
1. Texte coloré

Figure 2 Effet de filtre de masque 2

Que diriez-vous de l'effet ci-dessus ? pas mal! C'est un peu comme une image, n'est-ce pas ? C'est l'effet du filtre de masque. Un filtre blanc est utilisé ici, et son code est : .mask1 { filter:mask(color=#ffffff) }. La couleur du texte coloré est en fait la couleur de l’arrière-plan. La méthode de production est également très simple, il suffit d'insérer un tableau 1*1, d'ajouter un arrière-plan multicolore au tableau, de saisir du texte dans le tableau, de charger un filtre de masque dans la cellule, et vous avez terminé, n'est-ce pas ? !
2. Effet d'animation de projecteur
L'effet de projecteur suivant nécessite beaucoup d'efforts pour utiliser Flash, mais je ne m'attendais pas à ce qu'il puisse également être réalisé en utilisant des filtres CSS ! Étant donné que l'effet du projecteur est dynamique, je ne peux capturer que deux images de processus que vous pouvez voir. Si vous voulez voir l'effet dynamique, vous pouvez en créer une selon ce que j'ai dit ou aller chez moi (http://fym888. go.163.com) regardez.

Figure 3 Effet d'animation de projecteur 1

Figure 4 Effet d'animation de projecteur 2

Voici la méthode de production :
Cet effet est meilleur que l'exemple ci-dessus est un peu plus compliqué, mais il ne nécessite que quelques clics de souris supplémentaires.
1. Insérez un calque, que j'appelle le "calque parent". Ce calque sert à placer le contenu (texte ou images) à afficher. Insérez un calque au-dessus de ce calque, que j'appelle un sous-calque, et il est principalement utilisé pour créer un effet de masquage.
2. Définissez la fenêtre d'affichage sur le panneau de propriétés du calque parent, c'est-à-dire définissez l'attribut "Clip" du calque. Dans cet attribut, les coordonnées relatives sont utilisées, où : L et T sont les coordonnées du calque. coin supérieur gauche ; R et B sont les coordonnées du coin inférieur droit. Les sous-couches suivantes ne seront affichées que dans la fenêtre que vous avez définie. Le panneau de paramètres d'attribut de calque défini est tel qu'illustré dans la figure ci-dessous :

Figure 5 Panneau d'attributs de calque

Mon calque parent ici est "Layer4", et je définis l'intégralité du calque parent ici en tant que fenêtre d'affichage, elle est visible lorsque le calque enfant se déplace vers le calque parent, mais n'est pas visible en dehors du calque parent.
3. Nous insérons une image circulaire avec un fond transparent sur le sous-calque. Le but principal de l'utilisation d'une image circulaire ici est que la projection du projecteur ressemble à un cercle. doit être transparent, sinon le visible Ce sera une boîte rectangulaire en mouvement. Chargez ensuite un filtre de masque avec la même couleur que la couleur d'arrière-plan du calque parent sur le calque enfant, et agrandissez le calque enfant afin qu'il puisse recouvrir complètement le contenu du calque parent, de sorte que le contenu du calque parent dans le Le navigateur ne sera que circulaire. Cette partie de l'image est visible, ce qui est exactement ce que nous voulons.
4. Bien entendu, pour produire l'effet d'un projecteur, vous devez faire bouger la zone circulaire. Cela nécessite d'utiliser la fonction Timeline de Dreamweaver. Dans DW3, faites d'abord glisser vers le sous-calque afin que l'image dessus recouvre juste la tête du contenu du calque parent. Appuyez sur "Ctrl+F9" pour afficher le panneau de chronologie, faites glisser le sous-calque vers le panneau de chronologie, puis. faites glisser la dernière image vers l'image 100, insérez une image clé à l'image 50 et superposez l'image du sous-calque avec la queue du contenu du calque parent. Sélectionnez "Boucle" (lecture en boucle) et "Auto" (lecture automatique) sur la timeline. panneau. Tout est OK.
Une animation complexe est terminée. Appuyez sur F12 pour y jeter un œil. !