css实现弹框摘⾃⽹上的⼀篇⽂章，仅做收藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS特殊效果</title>
<style tpe="text/css">
/* ---------------------公共样式 -------------------*/
body{
background: #000;
}
.
none{
display: none;
}
.layout-root{
position: fixed;
background: grey;
height: 100%;
width: 100%;
z-index: 1000;
top: 0;
left: 0;
}
.layout-content{
line-height: 44px;
font-weight: 300;
font-size: 1em;
color: #fff;
text-indent: 10px;
}
.layout-content .code{
line-height: 22px;
text-align: center;
}
p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}
a, button{
outline: none;
}
button {
border: none;
padding: 0.6em 1.2em;
background: #000;
color: #fff;
font-size: 1em;
cursor: pointer;
display: block;
margin: 3px auto;
border-radius: 2px;
}
button:hover, button:active, button:focus{
border: none;
}
/* ---------------------弹窗样式 -------------------*/
.dialog-face{
position: fixed;
background: grey;
height: 100%;
width: 100%;
z-index: 1000;
top: 0;
left: 0;
-webkit-animation-duration: 500ms;
-moz-animation-duration:500ms;
-o-animation-duration:500ms;
animation-duration: 500ms;
}
.dialog-face.slipBottom[opacity="0"]{
display: none;
}
.dialog-face.slipUp{
opacity: 0.7;
-
webkit-animation-name: dialogFaceSlipToUp;
-moz-animation-name: dialogFaceSlipToUp;
-o-animation-name: dialogFaceSlipToUp;
animation-name: dialogFaceSlipToUp;
}
.dialog-face.slipBottom{
opacity: 0;
visibility: hidden;
-webkit-animation-name: dialogFaceSlipToBottom;
-moz-animation-name: dialogFaceSlipToBottom;
-o-animation-name: dialogFaceSlipToBottom;
animation-name: dialogFaceSlipToBottom;
}
.dialog-root{
position: fixed;
z-index: 2000;
left: 50%;
-webkit-animation-duration: 500ms;
-moz-animation-duration: 500ms;
-o-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-perspective: 1300px;
-
moz-perspective: 1300px;
perspective: 1300px;
}
.dialog-root.slipUp{
top: 50%;
opacity: 1;
-webkit-animation-name: dialogSlipToUp;
-moz-animation-name: dialogSlipToUp;
-o-animation-name: dialogSlipToUp;
animation-name: dialogSlipToUp;
-webkit-transform: translate(-50%, -50%);
-
o-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.dialog-root.slipBottom{
top: 100%;
opacity: 0.3;
-webkit-animation-duration: 500ms;
-moz-animation-duration: 500ms;
-o-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-name: dialogSlipToBottom;            -moz-animation-name: dialogSlipToBottom;
-o-animation-name: dialogSlipToBottom;
animation-name: dialogSlipToBottom;
-webkit-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
.dialog-wrapper{
background: grey;
width: 635px;
height: 375px;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-animation-duration: 500ms;
-moz-animation-duration: 500ms;
-o-animation-duration: 500ms;
animation-duration: 500ms;
-
webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin:50% 100%;
transform-origin: 50% 100%;
}
.dialog-wrapper.slipUp{
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
-webkit-animation-name: contentSlipToUp;
-moz-animation-name: contentSlipToUp;
-o-animation-name: contentSlipToUp;
animation-name: contentSlipToUp;
}
.dialog-wrapper.slipBottom{
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
-webkit-animation-name: contentSlipToBottom;            -moz-animation-name: contentSlipToBottom;            -o-animation-name: contentSlipToBottom;
animation-name: contentSlipToBottom;
}
.dialog-header{
height: 75px;
background: grey;
text-align: center;
}
.dialog-header span{
font-size: 28px;
line-height: 75px;
color:#FFF;
}
.dialog-content{
font-weight: 300;
font-size: 1.15em;
color: #fff;
padding: 15px 40px 20px 40px;
margin: 0;
}
.dialog-content p{
margin: 0;
padding: 10px 0;
}
.dialog-footer{
}
/* ---------------------动画关键帧 -------------------*/        @keyframes dialogFaceSlipToUp  {
0%{
opacity: 0;
}
100%{
opacity: 0.7;
}
}
@keyframes dialogFaceSlipToBottom {
0%{
opacity: 0.7;
visibility:visible;
}
100%{
visibility: hidden;
opacity: 0;
}
}
@keyframes dialogSlipToUp  {
0%{
top: 100%;
opacity: 0.3;
}
100%{
top: 50%;
opacity: 1;
}
}
@keyframes dialogSlipToBottom  {
0%{
top: 50%;
opacity: 1;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
100%{
top: 100%;
opacity: 0.3;
-webkit-transform: translate(-50%, 0);
-moz-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
-o-transform: translate(-50%, 0);
transform: translate(-50%, 0);
}
}
@keyframes contentSlipToUp  {
0%{
-
webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
100%{
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
}
@keyframes contentSlipToBottom  {
0%{
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
60%{
-webkit-transform: rotateX(60deg);
-moz-transform: rotateX(60deg);
-ms-transform: rotateX(60deg);
-o-transform: rotateX(60deg);
transform: rotateX(60deg);
}
100%{
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-
o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
}
</style>
</head>
<body>
<div class="fixed layout-root">
<div class="layout-content">
<button onclick="toggleDialog(true)">显⽰弹出框</button>
</div>
<div class="layout-content">
<p>
CSS3为⽤户添加了三个特殊效果的处理⽅式：过渡、动画、变化。当⽤户和界⾯元素交互时，使⽤这些特殊样式可⼤⼤改善⽤户的体验效果。这些效果可以直接由浏览器引擎处理，还能节省开销。尽管如此，这些效果会温馨提⽰：请谨慎⼤篇幅使⽤这些特殊效果。
另外⼀⽅⾯，由于在CCS3标准化之前，主流浏览器都是通过添加⼚商前缀⽅式提供样式⽀持。所以要解决浏览器兼容问题，使⽤这些样式，我们不得不为每⼀个样式添加各个产商前缀，例如添加⼀个过度延迟时间属性tra            </p>
<p class="code">
-webkit-transition-delay: 300ms;<br>
-o-transition-delay: 300ms;<br>
-moz-transition-delay: 300ms;<br>
-ms-transition-delay: 300ms;<br>
rotate属性
transition-delay: 300ms;
</p>
</div>
</div>
<div id="dialog-face" class="none">
</div>
<div id="dialog" class="none">
<div id="dialog-wrapper">
<div class="dialog-header">
<span>弹窗效果</span>
</div>
<div class="dialog-content">
<p>This is a modal window. You can do the following things with it:</p>
<ul>
<li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>                    <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
<li><strong>Close:</strong> click on the button below to close the modal.</li>
</ul>
</div>
<div class="dialog-footer">
<button onclick="toggleDialog(false)">关闭</button>
</div>
</div>
</div>
<script type="text/javascript">
function toggleDialog(show){
var animationClass = show ? "slipUp" : "slipBottom";
var animation = function(){
var ele = ElementById("dialog-face");
ele.className = "dialog-face " + animationClass;
ele = ElementById("dialog");
ele.className = "dialog-root " + animationClass;
ele = ElementById("dialog-wrapper");
ele.className = "dialog-wrapper " + animationClass;
};
setTimeout(animation, 100);
}
</script>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。