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

来源：动视网责编：小OO 时间：2020-11-27 18:51:33

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

代码如下：<。<。DOCTYPE HTML>；<；head>；<；script src="；jquery-1.8.2.min.js"；>；<；/script>；<；style>；#showp { background-color：red；width：300px；height：300px；display：none；} .from-below..from-below-to-below .effeckt-modal { -webkit-transform： translateX(100%)；-ms-transform： scale(0.5)；-o-transform： scale(0.5)；} <；)。

推荐度：

点击下载本文 文档为doc格式

导读代码如下：<。<。DOCTYPE HTML>；<；head>；<；script src="；jquery-1.8.2.min.js"；>；<；/script>；<；style>；#showp { background-color：red；width：300px；height：300px；display：none；} .from-below..from-below-to-below .effeckt-modal { -webkit-transform： translateX(100%)；-ms-transform： scale(0.5)；-o-transform： scale(0.5)；} <；)。

显示隐藏一个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制作鼠标经过按钮特效