Rumah > Artikel > hujung hadapan web > 用css3显示隐藏div的实例教程

用css3显示隐藏div的实例教程

Y2Jasal: 2017-05-24 10:45:443235semak imbas

显示隐藏一个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免费视频教程

2. 关于CSS3中的content属性实例详解

3. 详解CSS3中10个顶级命令

4. 简述网页设计师怎么使用好CSS3技术

5. css3制作鼠标经过按钮特效

Atas ialah kandungan terperinci 用css3显示隐藏div的实例教程. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：css3制作鼠标经过按钮特效Artikel seterusnya：CSS3设置RGB颜色的实例

Artikel berkaitan

Lihat lagi