11种炫酷打开模态窗口过渡动画特效-爱编程

11种炫酷打开模态窗口过渡动画特效

来源：htmleaf 阅读：20 时间：2018-02-03 03:18

这是一款使用CSS3 animation动画制作的超酷打开模态窗口过渡动画特效。该CSS过渡动画的原理是通过steps()函数来制作步进动画，通过不同的背景雪碧图片制作出不同的动画过渡效果。

使用方法

HTML结构

这11种不同的动画过渡效果每一种都使用一个单独的class类，注意每个demo中<body>元素上的class类。其它的HTML结构基本类似，如下：

<!doctype html>
<html lang="zh" class="no-js">
<head>
  <!-- ... -->
</head>
<body class="cartoon-transition">
<main class="cd-main-content">
  <!-- ... -->
</main> 
 
<div class="cd-modal" id="modal-1">
  <!-- ... -->
</div> 
 
<div class="cd-transition-layer" data-frame="25"> 
  <div class="bg-layer"></div>
</div> 
 
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
</body>
</html>

CSS样式

在style.css文件中包含了11种过渡动画的代码。其中Shared style部分是通用样式，包括了按钮的样式和模态窗口的样式。后面的每一个小结是各种效果的单独样式。

/* -------------------------------- 
 
Shared style
 
-------------------------------- */
 
.cd-btn {
  display: inline-block;
  padding: 1.6em 2.4em;
  font-size: 1.4rem;
  letter-spacing: .15em;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  transition: box-shadow .3s;
  /*...*/
}
 
/* -------------------------------- 
 
Scrub Effect - Custom effect style
 
-------------------------------- */
 
.scrub-transition {
  font-family: "PT Sans", sans-serif;
  color: #2c1a32;
  /*...*/
}
 
/* -------------------------------- 
 
Animations
 
-------------------------------- */
 
@keyframes cd-sequence {
  0% {
    transform: translateY(-50%) translateX(-2%);
  }
  100% {
    transform: translateY(-50%) translateX(-98%);
  }
}

在线预览源码下载