简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Le graphique carrousel CSS s'adapte au problème de mise en page
给我你的怀抱
给我你的怀抱 2017-06-13 09:23:41
0
3
983

Semblable à la disposition du carrousel, le conteneur bleu externe ne définit pas la largeur et est 100 % adaptatif. La largeur de chaque sous-conteneur est égale à la largeur du conteneur parent et est affichée dans une rangée. Les éléments sont masqués. Sans utiliser js. Cela peut-il être réalisé dans ces circonstances ?

给我你的怀抱
给我你的怀抱

répondre à tous (3)
学习ing
学习ing2017-06-13 09:25:41 3 plancher

Des effets similaires peuvent être obtenus simplement en s'appuyant sur CSS :

HTML：  
 
 
 
 
 
CSS： .p1{ animation: pleft 6s infinite linear; -webkit-animation: pleft 6s infinite linear; animation-fill-mode: both; -webkit-animation-fill-mode: both; } @keyframes pleft{ 0%{left: 200%} 100%{left: -100%} } .p2{ animation: pmid 6s infinite linear; -webkit-animation: pmid 6s infinite linear; animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-delay:2s; -webkit-animation-delay:2s; } @keyframes pmid{ 0%{left: 200%} 100%{left: -100%} } .p3{ animation: pright 6s infinite linear; -webkit-animation: pright 6s infinite linear; animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-delay:4s; -webkit-animation-delay:4s; } @keyframes pright{ 0%{left: 200%} 100%{left: -100%} }

jsfiddle.net pour voir si c'est ce que tu veux

Comme+0
Ajouter une réponse
    学习ing
    学习ing2017-06-13 09:25:41 2 plancher

    J'ai pensé à deux méthodes : flex et inline-block
    La largeur du conteneur est définie pour faciliter l'observation
    Logiquement parlant, il est également possible d'utiliser le positionnement. Mais il faut définir le positionnement un par un, donc je l'ai fait. ne le fais pas.

    https://jsfiddle.net/m41tLwqb/1/
    https://jsfiddle.net/2zcqqj26/

    Comme+0
    Ajouter une réponse
      女神的闺蜜爱上我
      女神的闺蜜爱上我2017-06-13 09:25:41 1 plancher

      J'ai utilisé du CSS pur pour créer un carrousel Quant à ce que vous avez mentionné, cela devrait être possible, mais je ne l'ai pas fait moi-même, donc je ne peux pas en être sûr

      .
      Comme+0
      Ajouter une réponse
        Sujets populaires
        Plus>
        Articles 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
        À propos de nous Clause de non-responsabilité Sitemap
        Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！