Lightbox/弹窗
炫酷打开模态窗口过渡动画特效
PetitQ
收藏
这是一款使用 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%);
}}
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
