CSS를 사용하여 이미지의 슬라이딩 효과를 얻는 방법은 무엇입니까? (예)
- 藏色散人원래의
- 2018-08-15 14:01:598206검색
이 글에서는 주로 CSS를 사용하여 이미지의 슬라이딩 효과를 구현하는 예를 소개합니다. 이 글을 읽은 후 CSS 슬라이딩 효과에 대한 지식을 가지기를 바랍니다.
간단한 CSS 이미지 슬라이딩 효과 예를 들어보겠습니다(아래에서 위로 슬라이딩):
<!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="CSS를 사용하여 이미지의 슬라이딩 효과를 얻는 방법은 무엇입니까? (예)" >
</div>
</div>
<button onclick="document.getElementById('slider').classList.toggle('closed');">点击试试</button>
</body>
<html>위 코드를 직접 복사하여 로컬에서 테스트할 수 있습니다. 효과는 아래와 같습니다.
아래 버튼을 마우스로 클릭하기만 하면 그림의 상향식 슬라이딩 효과가 나타납니다. 요소를 마우스로 클릭하면 실행되는 onclick 속성이 있습니다. 즉, 버튼을 클릭하면 JavaScript가 실행됩니다.
참고: 온클릭
속성은 다음 요소에 적용되지 않습니다:
, , ,
위 내용은 CSS에서 이미지 슬라이딩을 구현하는 방법에 대한 이 글의 소개입니다. 도움이 필요한 친구들에게 도움이 되길 바랍니다.
위 내용은 CSS를 사용하여 이미지의 슬라이딩 효과를 얻는 방법은 무엇입니까? (예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.