我正在使用 Bootstrap 创建一个网站。我偶然发现了我想集成到我的网站中的这种极好的模态效果。但是，我还没有找到有关如何执行此操作的任何信息。
请参阅： http ://tympanus.net/Development/ModalWindowEffects/
特别是效果 18: 'Make Way' 效果的 CSS：
/* Slide from right with perspective on container */
.md-show.md-effect-18 ~ .container {
height: 100%;
overflow: hidden;
}
.md-show.md-effect-18 ~ .md-overlay {
background: rgba(143,27,15,0.8);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}
.md-show.md-effect-18 ~ .container,
.md-show.md-effect-18 ~ .md-overlay {
-webkit-transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
-webkit-animation: rotateRightSideFirst 0.5s forwards ease-in;
-moz-transform-style: preserve-3d;
-moz-transform-origin: 0% 50%;
-moz-animation: rotateRightSideFirst 0.5s forwards ease-in;
transform-style: preserve-3d;
-ms-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-o-animation: rotateRightSideFirst 0.5s forwards ease-in;
animation: rotateRightSideFirst 0.5s forwards ease-in;
}
@-webkit-keyframes rotateRightSideFirst {
50% {
-webkit-transform: translateZ(-50px) rotateY(5deg);
-moz-transform: translateZ(-50px) rotateY(5deg);
-ms-transform: translateZ(-50px) rotateY(5deg);
-o-transform: translateZ(-50px) rotateY(5deg);
transform: translateZ(-50px) rotateY(5deg);
-webkit-animation-timing-function: ease-out;
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-webkit-transform: translateZ(-200px);
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
transform: translateZ(-200px);
}
}
@-moz-keyframes rotateRightSideFirst {
50% {
-moz-transform: translateZ(-50px) rotateY(5deg);
-ms-transform: translateZ(-50px) rotateY(5deg);
-o-transform: translateZ(-50px) rotateY(5deg);
-webkit-transform: translateZ(-50px) rotateY(5deg);
transform: translateZ(-50px) rotateY(5deg);
-moz-animation-timing-function: ease-out;
-o-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
100% {
-moz-transform: translateZ(-200px);
-ms-transform: translateZ(-200px);
-o-transform: translateZ(-200px);
-webkit-transform: translateZ(-200px);
transform: translateZ(-200px);
}
}
@keyframes rotateRightSideFirst {
50% { -moz-transform: translateZ(-50px) rotateY(5deg); -ms-transform: translateZ(-50px) rotateY(5deg); -o-transform: translateZ(-50px) rotateY(5deg); -webkit-transform: translateZ(-50px) rotateY(5deg); transform: translateZ(-50px) rotateY(5deg); -moz-animation-timing-function: ease-out; -o-animation-timing-function: ease-out; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; }
100% { -moz-transform: translateZ(-200px); -ms-transform: translateZ(-200px); -o-transform: translateZ(-200px); -webkit-transform: translateZ(-200px); transform: translateZ(-200px); }
}
.md-effect-18 .md-content {
-webkit-transform: translateX(200%);
-moz-transform: translateX(200%);
-ms-transform: translateX(200%);
-o-transform: translateX(200%);
transform: translateX(200%);
opacity: 0;
}
.md-show.md-effect-18 .md-content {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
opacity: 1;
-webkit-transition: all 0.5s 0.1s;
-moz-transition: all 0.5s 0.1s;
-o-transition: all 0.5s 0.1s;
transition: all 0.5s 0.1s;
}
网页
<div class="modal fade" id="AddGameModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class="modal-title" id="myModalLabel">Woowie! Not so fast</h2>
</div>
<div class="modal-body">
<div class="alert alert-danger">
<h4>Remember!</h4>
<p>You have to have the physical game in order to complete a share, no digital copies allowed.</p>
</div>
<h2>Please confirm you have entered the right game:</h2>
<div id="ConfirmDetails">
<h3>Title of the game</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sit amet luctus sapien, ut lacinia felis. Sed adipiscing vitae orci at porttitor. Integer ullamcorper et risus vel interdum. Nulla rutrum, lectus quis vestibulum mollis, lectus nisi dapibus mi, at dapibus leo augue non dolor. Sed nec felis porttitor, bibendum augue sit amet, euismod tellus. Vivamus suscipit, purus id luctus dapibus, dui mauris ultricies orci, quis lacinia neque elit nec nisl. Pellentesque suscipit urna in nibh venenatis, a aliquet arcu mattis. Integer ultricies ipsum justo, eget interdum arcu auctor id. Donec ultricies sem quam, sed egestas turpis adipiscing quis. Maecenas sit amet faucibus nisl, nec tempus nulla. Maecenas porta lectus mi, non commodo odio suscipit et. Etiam ultrices neque et adipiscing tristique.</p>
<p>Platform of the game</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Oh damn wrong one!</button>
<button type="button" class="btn btn-success">Yes that's the one mate </button>
</div>
</div>
</div>
</div>