Wie kann man mit CSS den Gleiteffekt von Bildern erzielen? (Beispiel)-CSS-Tutorial-php.cn

Wie kann man mit CSS den Gleiteffekt von Bildern erzielen? (Beispiel)

藏色散人

Freigeben： 2018-08-15 14:01:59

Original

8210 Leute haben es durchsucht

In diesem Artikel werden Ihnen hauptsächlich Beispiele für CSS-Gleiteffekte für Bilder vorgestellt. Ich hoffe, dass Sie nach der Lektüre dieses Artikels über einige Kenntnisse über CSS-Gleiteffekte verfügen.

Das Folgende ist ein einfaches Beispiel für einen CSS-Bildgleiteffekt (Gleiten von unten nach oben):

<!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="Wie kann man mit CSS den Gleiteffekt von Bildern erzielen? (Beispiel)" >
       </div>
</div>
<button onclick="document.getElementById(&#39;slider&#39;).classList.toggle(&#39;closed&#39;);">点击试试</button>
</body>
<html>

Nach dem Login kopieren

Der obige Code kann direkt kopiert und lokal getestet werden. Der Effekt ist wie folgt:

Wie kann man mit CSS den Gleiteffekt von Bildern erzielen? (Beispiel)

Solange Sie mit der Maus auf die Schaltfläche unten klicken, erscheint ein von unten nach oben verschobener Effekt des Bildes. Es gibt ein onclick-Attribut, das durch einen Mausklick auf das Element ausgelöst wird, d. h. ein Stück JavaScript wird ausgeführt, wenn auf die Schaltfläche geklickt wird.

Hinweis: onclick Das Attribut gilt nicht für die folgenden Elemente: , ,
, , , , <meta>, <param>, <script> oder <Titel>. </script>

Das Obige ist die Einleitung dieses Artikels zur Implementierung von Image Sliding in CSS. Ich hoffe, dass er Freunden in Not hilfreich sein wird.

Das obige ist der detaillierte Inhalt vonWie kann man mit CSS den Gleiteffekt von Bildern erzielen? (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!