Comment obtenir l'effet de glissement des images en utilisant CSS ? (exemple)-tutoriel CSS-php.cn

Comment obtenir l'effet de glissement des images en utilisant CSS ? (exemple)

藏色散人

Libérer： 2018-08-15 14:01:59

original

8233 Les gens l'ont consulté

Cet article vous présente principalement des exemples d'effets de glissement CSS pour les images. J'espère que vous aurez quelques connaissances sur les effets de glissement CSS après avoir lu cet article.

Ce qui suit est un exemple simple d'effet de glissement d'image CSS (coulissant de bas en haut) :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css怎么实现图片滑动</title>
    <style type="text/css">
        img{
            height: 200px;
            width: 200px;
        }
        .slider {
            overflow-y: hidden;
            max-height: 500px;
            /* 最大高度 */
            background: pink;
            height: 200px;
            width: 200px;
            /*  Webkit内核浏览器：Safari and Chrome*/
            -webkit-transition-property: all;
            -webkit-transition-duration: .5s;
            -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
            /*  Mozilla内核浏览器：firefox3.5+*/
            -moz-transition-property: all;
            -moz-transition-duration: .5s;
            -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
            /*  Opera*/
            -o-transition-property: all;
            -o-transition-duration: .5s;
            -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
            /*  IE9*/
            -ms-transition-property: all;
            -ms-transition-duration: .5s;
            -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
        }
        .slider.closed {
            max-height: 0;
        }
    </style>
</head>
<body>
<div style="height: 200px; width: 200px; border: 1px solid #ccc;">
    <div class="slider" id="slider">
        <img  src="2.png" alt="Comment obtenir l'effet de glissement des images en utilisant CSS ? (exemple)" >
       </div>
</div>
<button onclick="document.getElementById(&#39;slider&#39;).classList.toggle(&#39;closed&#39;);">点击试试</button>
</body>
<html>

Copier après la connexion

Le code ci-dessus peut être copié directement et testé localement, et l'effet est comme indiqué ci-dessous :

Comment obtenir leffet de glissement des images en utilisant CSS ? (exemple)

Tant que vous cliquez sur le bouton ci-dessous avec votre souris, un effet coulissant de bas en haut de l'image apparaîtra. Il existe un attribut onclick, qui est déclenché par un clic de souris sur l'élément, c'est-à-dire qu'un morceau de JavaScript est exécuté lorsque le bouton est cliqué.

Remarque : onclick L'attribut ne s'applique pas aux éléments suivants : , ,
, , , , <meta>, <param>, <script> ,<style> ou <titre>. </script>

Ce qui précède est l'introduction de cet article sur la façon d'implémenter le glissement d'images en CSS. J'espère que cela sera utile aux amis dans le besoin.

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!