CSS3를 사용하여 div를 표시하고 숨기는 예제 튜토리얼-CSS 튜토리얼-php.cn

CSS3를 사용하여 div를 표시하고 숨기는 예제 튜토리얼

Y2J

풀어 주다： 2017-05-24 10:45:44

원래의

3257명이 탐색했습니다.

P 특수 효과를 표시하고 숨기는 방법은 여러 가지가 있습니다. 다음은 순수 CSS3를 사용하여 이를 달성하는 방법에 대한 소개입니다. 관심 있는 친구는

코드는 다음과 같습니다.

<!DOCTYPE HTML> 
<head> 
<script src="
jquery
-1.8.2.min.
js
"></script> 
<style> 
#showp { 
background-color
:red; 
width
:
300
px; 
height
:300px; 
display
:none; 
} 
.from-below, 
.from-below-to-below .effeckt-modal { 
-webkit-trans
for
m: translateX(100%); 
-ms-transform: scale(0.5); 
-o-transform: scale(0.5); 
transform: scale(0.5); 
opacity: 0; 
-webkit-transition: 
all
 500ms; 
-o-transition: 500ms; 
transition: 500ms; 
} 
.effeckt-show, 
.effeckt-show.from-below-to-below .effeckt-modal { 
-webkit-transform: translateX(0); 
-ms-transform: scale(1); 
-o-transform: scale(1); 
transform: scale(1); 
opacity: 1; 
} 
.effeckt-show .effeckt-modal { 
visibility
: visible; 
} 
</style> 
<script> 
function show(){ 
$("#showp").show(); 
$("#showp").add
Class
("from-below"); 
set
Time
out(function(){$("#showp").addClass("effeckt-show");},300); 
} 
function hide(){ 
$("#showp").removeClass("effeckt-show"); 
} 
</script> 
</head> 
<body class="sapUiBody"> 
<input type="button" id="bt" value="show" 
onClick
="show()"> 
<input type="button" id="bt" value="hide" onClick="hide()"> 
<p id="showp" class=""> 
<h1>aaaaa</h1> 
</p> 
</body>

로그인 후 복사

【 관련 추천】

1. CSS3 무료 동영상 튜토리얼

CSS3의 콘텐츠 속성 예시에 대한 자세한 설명

3 . CSS3의 10가지 주요 명령에 대한 자세한 설명

4. 웹 디자이너가 CSS3 기술을 잘 활용할 수 있는 방법에 대한 간략한 설명

5. css3 마우스 오버 버튼에 대한 특수 효과 만들기

위 내용은 CSS3를 사용하여 div를 표시하고 숨기는 예제 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!