recherche
Maisoninterface Webtutoriel CSSEffets CSS qui font admirer les gens_Experience Exchange

Auteur : eoe
1. Xunxunmimi
Vous devez d'abord trouver un bon effet~ avant de pouvoir le copier
commehttp://www.cssplay.co.uk/
http://www.cssbeauty.com
On le voit souvent

Je suis passé accidentellement par cssplay
http://www.cssplay.co aujourd'hui/ menus/magnifier2.html
Ça a l'air très amusant

Ouvrez topstyle et essayez-le
Il est recommandé à tout le monde de voir des styles intéressants~Ne le faites pas. se précipiter pour regarder son CSS~ Cela n'a aucun sens

2. Faites-le vous-même ~ ayez assez de nourriture et de vêtements
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">

http://www.w3.org/1999/xhtml">


 a
 








   提示:你可以先修改部分代码再运行

做完自我感觉还不错~ ~~

主要就是a:hover position: absolute;  margin 三个~
不过做后才发现~IE5的A失效了

3.取找补短
是时候看人家的CSS的~`虽然同样也是IE5的A失效
#enlarge {padding:0;  margin:2em auto; type de style de liste : aucun ; largeur : 240 px ; height:40px;}
#enlarge li {display:block; flotteur : gauche ; largeur : 40 px ; hauteur : 40 px ; position:relative;}
#enlarge li a {display:block; largeur : 40 px ; hauteur : 40 px ; arrière-plan : transparent ; débordement : caché ; position:relative;}
#enlarge li a img {width:100%; hauteur : 100 % ; border:0;}
#enlarge li a:hover {position:absolute; gauche : -20px ; haut : -20 px ; largeur : 80 px ; hauteur : 80 px ; z-index:100;}
   提示:你可以先修改部分代码再运行

FT ~写得比人家多了一个定义~~
他的方法是用position:relative 配合à gauche en haut分页可以用这样来玩~

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/1999/xhtml">

    
a
    
        ul#hovershow2{
2

    

    
a
    

        ul#hovershow2{
            list-style- type : aucun;
            marge :  50px;
             largeur : 200px;nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "            float : gauche ;             affichage : en ligne ;
            clear : les deux ;
        }        ul#hovershow2 li {            float : gauche ;
             affichage : en ligne ;            largeur : 20 px ;
            hauteur :  20 px ;            marge : 2px;
        }
        ul#hovershow2 li a {
            text-decoration: aucun;
            affichage : block;
             width: 20px;
             hauteur : 20 px ;
            bordure : 1 px rouge solide ;
> 🎜>        ul#hovershow2 li a : survol{
        position : absolue;
        largeur: 40px;
        hauteur :  40px;
        hauteur de ligne : 40px;
        taille de police : 32px;
        index-z : 100 ;
        marge : -10px 0 0 -10px ;
        }
ul#hovershow2 li:hover + li a{
        position : absolue ;
        largeur : 30 px ;
        hauteur : 30 px ;
        hauteur de ligne : 30px;
        taille de police : 24px;
       z-index: 99;
        marge : -5px 0 0 -5px;
        }

    







    

1

  •     2

  •     3

  •     4

  •     5

  •     6

  •     7


   提示:你可以先修改部分代码再运行

效果不是很是很理想试过把后面的A宽改成到刚好挡到左边的~可是看不到数字~不好看
也试过一边用原来的方法一边用:after加了图片在左边~可是~一边有数字一边没有~更不好看~~又不可能做N张有数字的图photo ~扩展性不好 

也许这就是css本身所限
或许~用JS可以更简单的解决~````
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
Les astuces CSS perdues de Cohost.orgLes astuces CSS perdues de Cohost.orgApr 25, 2025 am 09:51 AM

Dans cet article, Blackle Mori vous montre quelques-uns des hacks trouvés tout en essayant de repousser les limites du support HTML de Cohost. Utilisez-les si vous osez, de peur que vous soyez également étiqueté un criminel CSS.

Style CSS de niveau supérieur pour les curseursStyle CSS de niveau supérieur pour les curseursApr 23, 2025 am 11:04 AM

Les curseurs personnalisés avec CSS sont excellents, mais nous pouvons faire passer les choses au niveau supérieur avec JavaScript. À l'aide de JavaScript, nous pouvons passer entre les états du curseur, placer du texte dynamique dans le curseur, appliquer des animations complexes et appliquer des filtres.

Worlds Collide: Détection de collision de l'ordre clé à l'aide de requêtes de styleWorlds Collide: Détection de collision de l'ordre clé à l'aide de requêtes de styleApr 23, 2025 am 10:42 AM

Les animations CSS interactives avec des éléments se ricochent semblent plus plausibles en 2025. Bien qu'il soit inutile de mettre en œuvre Pong dans CSS, la flexibilité et la puissance croissantes de CSS renforcent le soupçon de Lee selon lequel un jour, ce sera un jour

Utilisation du filtre de fond CSS pour les effets d'interface utilisateurUtilisation du filtre de fond CSS pour les effets d'interface utilisateurApr 23, 2025 am 10:20 AM

Conseils et astuces sur l'utilisation de la propriété CSS Back-Filter pour styliser les interfaces utilisateur. Vous apprendrez à superposer des filtres en toile de fond entre plusieurs éléments et à les intégrer à d'autres effets graphiques CSS pour créer des conceptions élaborées.

Smil sur?Smil sur?Apr 23, 2025 am 09:57 AM

Eh bien, il s'avère que les fonctionnalités d'animation intégrées de SVG n'ont jamais été obsolètes comme prévu. Bien sûr, CSS et JavaScript sont plus que capables de porter la charge, mais il est bon de savoir que Smil n'est pas mort dans l'eau comme précédemment

'Pretty' est dans l'œil du spectateur'Pretty' est dans l'œil du spectateurApr 23, 2025 am 09:40 AM

Yay, laissez-le saut pour le wat-wrap: joli atterrissage dans la technologie safari aperçu! Mais méfiez-vous qu'il est différent de la façon dont il fonctionne dans les navigateurs de chrome.

CSS-Tricks raconte xliiiCSS-Tricks raconte xliiiApr 23, 2025 am 09:35 AM

Cette mise à jour de CSS-Tricks met en évidence des progrès significatifs dans l'Almanac, des apparitions de podcast récentes, un nouveau guide CSS Counter et l'ajout de plusieurs nouveaux auteurs contribuant un contenu précieux.

La fonctionnalité @Apply de Tailwind est meilleure qu'il n'y paraîtLa fonctionnalité @Apply de Tailwind est meilleure qu'il n'y paraîtApr 23, 2025 am 09:23 AM

La plupart du temps, les gens présentent la fonctionnalité de Tailwind avec l'un des utilitaires à propriété unique de Tailwind (qui modifie une seule déclaration CSS). Lorsqu'il est présenté de cette façon, @Apply ne semble pas du tout prometteur. So évidence

See all articles

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

Navigateur d'examen sécurisé

Navigateur d'examen sécurisé

Safe Exam Browser est un environnement de navigation sécurisé permettant de passer des examens en ligne en toute sécurité. Ce logiciel transforme n'importe quel ordinateur en poste de travail sécurisé. Il contrôle l'accès à n'importe quel utilitaire et empêche les étudiants d'utiliser des ressources non autorisées.

VSCode Windows 64 bits Télécharger

VSCode Windows 64 bits Télécharger

Un éditeur IDE gratuit et puissant lancé par Microsoft

Version Mac de WebStorm

Version Mac de WebStorm

Outils de développement JavaScript utiles

PhpStorm version Mac

PhpStorm version Mac

Le dernier (2018.2.1) outil de développement intégré PHP professionnel