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

当前位置:主页 > CSS3库 > CSS3动画 > 11种炫酷打开模态窗口过渡动画特效
小编推荐: 掘金是国内最活跃的技术社区,从 jQuery到vue,从前端教程到开源库,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。
11种炫酷打开模态窗口过渡动画特效
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-05-12
    阅读:
简要教程

这是一款使用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%);
  }
}                 
                

网友评论