核心提示：纯CSS模态窗口实现炫酷动画效果的代码教程!DOCTYPE htmlhtmlheadmeta charset=utf-8 /titleModal/titlestyle type=text/cssbod...
纯CSS模态窗口实现炫酷动画效果的代码教程
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Modal</title>
<style type="text/css">
body,html{margin: 0;padding: 0;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh;width: 100vm;
-ms-flex-align: center;
align-items: center;
background-color: #533387;
font-family: sans-serif;
background-image: url(img/pattern.png);}
code{background: #fff;
color: #845EC2;
padding: 2px 6px;
border-radius: 2px;
display: block;}
code pre{overflow: auto;}
a{color: #fff;}
p span{background: #fff;
color: #845EC2;
padding: 5px 10px;
border-radius: 2px;}
header{-ms-flex-align: center;
-ms-flex-line-pack: end;
justify-content: flex-end;}
.main,header{
display: -ms-flexbox;
display: flex;
align-items: center;
width: 100%;
}
.main{-ms-flex-direction: column;
flex-direction: column;
-ms-flex: 1;
flex: 1;
-ms-flex-line-pack: center;
justify-content: center;
-ms-flex-align: center;}
.modal-type,.modals{text-align: center;}
.modal-content{font-size: 16px;}
.btn,.modal-content{font-family: sans-serif;}
.btn{text-decoration: none;
background: #845EC2;
color: #fff;
padding: 15px;
font-size: 14px;
margin: 10px;
display: inline-block;
text-transform: capitalize;
letter-spacing: 1px;
border-radius: 2px;
transition: background .2s ease-in-out;
}
.btn:focus,.btn:hover{background: #6A41AC;}
.btn .for-github{fill: #fff;background: none;}
.title{color: #fff;
font-family: Reenie Beanie,cursive;
font-size: 48px;
text-align: center;
margin: 20px;}
.sub-title{font-size: 14px;
color: #fff;}
.sub-title:before{content: "Animation : ";}
select{padding: 10px;
border-radius: 4px;
border: 0;}
.ga{margin-top: 30px;width: 400px;}
@mesia screen and{max-width: 480px}{
.title{font-size: 22px;}
}
.light-modal{display: none;
position: fixed;
background: transparent;
top: 0;
bottom: 0;
left: 0;
-ms-flex-align: center;
align-items: center;
justify-content: center;
right: 0;
z-index: 9000;
transition: background 1s;
font-size: 16px;}
.light-modal-content{background: #845EC2;
color: #fff;
width: 30vw;
border-radius: .2em;
position: relative;
max-height: calc(100vh - 150px);
line-height: 1.4;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;}
.light-modal-content img{
max-width: 100%;
border-radius: .2em;
}
.light-modal-content.large-content{width: 50vw;}
.light-modal-header{padding: 20px;
background: rgba(0,0,0,0.2);
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
-ms-flex-align: center;
align-items: center;}
.light-modal-heading{margin: 0;
font-size: 1.5em;}
.light-modal-heading , .light-modal-close-icon{position: static;}
.light-modal-body{padding: 20px;
overflow: auto;
max-height: 450px;}
.light-modal-footer{
padding: 20px;
background: rgba(0,0,0,0.2);
text-align: right;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center;
}
.light-modal-close-icon,.light-modal-close-btn{
text-decoration: none;
color: #fff;
padding: 5px 10px;
border-radius: .2em;
background: #FF6F91;
font-size: 1.5em;
line-height: 1;
transition: background .2s ease-in-out;
}
.light-modal-close-icon:hover,.light-modal-close-btn:hover{background: #FF3C6A;}
.light-modal-close-icon{
position: absolute;
top: -15px;
right: -15px;
}
.light-modal-caption{position: absolute;
left: 50%;
-ms-transform: translateX(-50%);
transform: translateX(-50%);
top: 100%;
padding: 10px 0;
background: rgba(0,0,0,0.2);
border-radius:.2em ;
width: 100%;
text-align: center;
margin-top: 5px;}
.light-modal:target{
background: rgba(0,0,0,0.5);
display: -ms-flexbox;
display: flex;
}
@keyframes basic{
0%{
opacity: 0;
}
10%{
opacity: 1;
}
}
.basic{animation-name: basic;}
@media (max-width: 767px) {
.light-modal{font-size: 14px;}
.light-modal:target .light-modal-content{width: 70vw;}
}
@supports(display:flex) {
@media (max-width: 767px) {
.light-modal:target .light-modal-content{
width: 70vw;
}
}
}
</style>
</head>
<body>
<p class="htmleaf-container">
<!--<header class="htmleaf-header">
<h1>纯CSS模态窗口实现炫酷动画效果 <span>A new lightweight, powerful and easy to use CSS Modal</span></h1>
</header>-->
<p class="main">
<p class="title">Light Modal | <small>Pure CSS</small></p>
<p class="modals">
<p class="modal-type">
<a href="#modal-id-1" class="btn">Open Simple Modal</a>
<a href="#modal-id-2" class="btn">Modal with Header/Footer</a>
<a href="#image-modal" class="btn">Open Image Modal</a>
</p>
<form>
<select class="input input--dropdown js--animations">
<option value="zoomInUp">选择一种动画效果</option>
<option value="basic">Basic</option>
<optgroup label="Attention Seekers">
<option value="bounce">bounce</option>
<option value="flash">flash</option>
<option value="pulse">pulse</option>
<option value="rubberBand">rubberBand</option>
<option value="shake">shake</option>
<option value="swing">swing</option>
<option value="tada">tada</option>
<option value="wobble">wobble</option>
<option value="jello">jello</option>
</optgroup>
<optgroup label="Bouncing Entrances">
<option value="bounceIn">bounceIn</option>
<option value="bounceInDown">bounceInDown</option>
<option value="bounceInLeft">bounceInLeft</option>
<option value="bounceInRight">bounceInRight</option>
<option value="bounceInUp">bounceInUp</option>
</optgroup>
<optgroup label="Fading Entrances">
<option value="fadeIn">fadeIn</option>
<option value="fadeInDown">fadeInDown</option>
<option value="fadeInDownBig">fadeInDownBig</option>
<option value="fadeInLeft">fadeInLeft</option>
<option value="fadeInLeftBig">fadeInLeftBig</option>
<option value="fadeInRight">fadeInRight</option>
<option value="fadeInRightBig">fadeInRightBig</option>
<option value="fadeInUp">fadeInUp</option>
<option value="fadeInUpBig">fadeInUpBig</option>
</optgroup>
<optgroup label="Flippers">
<option value="flip">flip</option>
<option value="flipInX">flipInX</option>
<option value="flipInY">flipInY</option>
</optgroup>
<optgroup label="Lightspeed">
<option value="lightSpeedIn">lightSpeedIn</option>
</optgroup>
<optgroup label="Rotating Entrances">
<option value="rotateIn">rotateIn</option>
<option value="rotateInDownLeft">rotateInDownLeft</option>
<option value="rotateInDownRight">rotateInDownRight</option>
<option value="rotateInUpLeft">rotateInUpLeft</option>
<option value="rotateInUpRight">rotateInUpRight</option>
</optgroup>
<optgroup label="Sliding Entrances">
<option value="slideInUp">slideInUp</option>
<option value="slideInDown">slideInDown</option>
<option value="slideInLeft">slideInLeft</option>
<option value="slideInRight">slideInRight</option>
</optgroup>
<optgroup label="Zoom Entrances">
<option value="zoomIn">zoomIn</option>
<option value="zoomInDown">zoomInDown</option>
<option value="zoomInLeft">zoomInLeft</option>
<option value="zoomInRight">zoomInRight</option>
<option value="zoomInUp">zoomInUp</option>
</optgroup>
<optgroup label="Specials">
<option value="rollIn">rollIn</option>
</optgroup>
</select>
</form>
</p>
</p>
<p class="light-modal" id="how-to-use" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
<p class="light-modal-content large-content animated zoomInUp">
<p class="light-modal-header">
<h3 class="light-modal-heading">How to Use</h3>
<a href="#" class="light-modal-close-icon" aria-label="close">×</a>
</p>
<p class="light-modal-body">
<p>Install via npm <code>npm install light-modal</code></p>
<p>Or Download the Zip and include <code>dist/css/light-modal.min.css</code> in your page head.</p>
<p>Modal Markup:</p>
<code>
<pre><p class="light-modal" id="unique-id" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
<p class="light-modal-content animated zoomInUp">
<!-- light modal header -->
<p class="light-modal-header">
<h3 class="light-modal-heading">Modal Title</h3>
<a href="#" class="light-modal-close-icon" aria-label="close">&times;</a>
</p>
<!-- light modal body -->
<p class="light-modal-body">
<!-- Your content -->
</p>
<!-- light modal footer -->
<p class="light-modal-footer">
<a href="#" class="light-modal-close-btn" aria-label="close">Close</a>
</p>
</p>
</p></pre>
</code>
<p>Note:If you don't need header and footer then simply exclude it. </p>
<h3>How to Trigger?</h3>
<p>You can open a modal by adding the <span>id</span> of the modal to any anchor tag e.g to open the above markup modal you need to add:</p>
<code><pre><a href="#unique-id" class="btn">Open Modal</a></pre></code>
<p>Note:Dont forget to add the <span>#</span> before the id. e.g <span>#unique-id</span></p>
<h3>Animation</h3>
<p>To add an animation, include animation class to <span>light-modal-content</span> For demo i am using <a href="https://daneden.github.io/animate.css/" target="_blank" class="animated infinite">Animate.css</a> animations.</p>
<p>That's It.
<br>If you find any issue fell free to submit on <a href="https://github.com/hunzaboy/Light-Modal/issues">Github.</a></p>
</p>
<p class="light-modal-footer">
<a href="#" class="light-modal-close-btn" aria-label="close">Close</a>
</p>
</p>
</p>
<p class="light-modal" id="modal-id-1" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
<p class="light-modal-content animated zoomInUp">
<a href="#" class="light-modal-close-icon" aria-label="close">×</a>
<p class="light-modal-body">
<p>Light modal is a pure CSS based modal. It works using <span>:target</span> property</p>
<p>Current animations are based on <a href="https://daneden.github.io/animate.css/" target="_blank" class="animated infinite">Animate.css</a>.</p>
<p>However you are free to use your own animations. Just add your animation class to <span>light-modal-content</span> and you are good to go.</p>
</p>
</p>
</p>
<p class="light-modal" id="modal-id-2" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
<p class="light-modal-content animated zoomInUp">
<!-- light modal header -->
<p class="light-modal-header">
<h3 class="light-modal-heading">Modal Title</h3>
<a href="#" class="light-modal-close-icon" aria-label="close">×</a>
</p>
<!-- light modal body -->
<p class="light-modal-body">
<p>Light modal is a pure CSS based modal. It works using <span>:target</span> property</p>
<p>Current animations are based on <a href="https://daneden.github.io/animate.css/" target="_blank" class="animated infinite">Animate.css</a>.</p>
<p>However you are free to use your own animations. Just add your animation class to <span>light-modal-content</span> and you are good to go.</p>
</p>
<!-- light modal footer -->
<p class="light-modal-footer">
<a href="#" class="light-modal-close-btn" aria-label="close">Close</a>
</p>
</p>
</p>
<p class="light-modal" id="image-modal" role="dialog" aria-labelledby="light-modal-label" aria-hidden="true">
<p class="light-modal-content animated zoomInUp">
<img src="img/norbert-von-niman-354528.jpg" alt="from unsplash">
<a href="#" class="light-modal-close-icon" aria-label="close">×</a>
<p class="light-modal-caption">Photo by Norbert von Niman on <a href="https://unsplash.com/@norrisniman" target="_blank">Unsplash</a></p>
</p>
</p>
</p>
</body>
</html>
