communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel HTML > 纯CSS3实现图片展示特效_html/css_WEB-ITnose

纯CSS3实现图片展示特效_html/css_WEB-ITnose

WBOY
Libérer： 2016-06-24 11:51:02
original
1215 Les gens l'ont consulté

本文中要实现的一个纯CSS3的图片展示特效，以前只能用JavaScript实现，可想而知会受到多方面的限制，特别是性能。而今天我们将用简单的CSS3代码实现，你会发现它的动画效果在现代浏览器的帮助下无比的顺滑。

观看演示

HTML代码

通过上的演示，估计你已经能猜到，它的HTML结果应该是一个父元素里包含多个子元素，没错：这里用的是一个ol和其子元素li。



CSS代码

CSS代码要实现的动作就是当鼠标悬停时让宽度发生变化。



非常简单的几段CSS代码就能实现我们要求的动作，但这里有几个事情需要注意：

  • 最好要设置overflow-x: hidden; ，以免出现奇怪的效果。
  • 我们用两个transition-属性控制图片展示的宽度，起初都是显示一半，当鼠标悬停在某个图片上时，宽度增加。



    • 这里我们只使用了几个图片，但图片的个数是不受限制的。

    观看演示

     

    文字来自：http://www.webhek.com/css-kwicks

     

    Étiquettes associées：
    纯CSS3实现图片展示特效
    source：php.cn
    Article précédent：CSS3之圆角_html/css_WEB-ITnose Article suivant：css5种实现垂直居中_html/css_WEB-ITnose
    Déclaration de ce site Web
    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
    Derniers articles par auteur
    Derniers numéros
    function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...
    Depuis 2024-04-29 11:01:01
    0
    3
    2174
    Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?
    Depuis 2024-04-23 00:22:19
    0
    11
    2325
    La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...
    Depuis 2024-04-19 15:37:47
    0
    1
    1958
    Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...
    Depuis 2024-04-18 23:52:34
    0
    1
    1840
    Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
    Depuis 2024-04-16 10:10:18
    0
    0
    1887
    Rubriques connexes
    Plus>
    Recommandations populaires
    Tutoriels populaires
    Plus>
    Tutoriels associés
    Recommandations populaires
    Derniers cours
    Derniers téléchargements
    Plus>
    effets Web
    Code source du site Web
    Matériel du site Web
    Modèle frontal