html按钮过渡效果,超炫喷洒墨水动画过渡效果的打开模态窗口特效_html/css_WEB-ITnose...

简要教程

这是一款使用CSS3和jQuery来制作的炫酷喷洒墨水式打开模态窗口特效。该特效在点击按钮时通过一张PNG墨水喷洒的雪碧图和steps()函数来制作墨水散开的效果，整个效果就像在屏幕上撒上了墨水，使屏幕改变了一个颜色。

通过一张制作好的雪碧图，以及CSS的steps()函数，我们可以制作出各种平滑过渡的动画效果。一些效果的图片可以直接从某些视频video中提取，使用的工具是After Effects。你可以将需要的视频的帧转换为连续的PNG图片，然后将这些图片拼接为雪碧图。

查看演示 下载插件

使用方法

HTML结构

该效果的HTML结构分为3个主要部分：main.cd-main-content是页面的主体部分，div.cd-modal是模态窗口，div.cd-transition-layer是一个动画过渡层。 Ink Transition Effect Start Effect

My Modal Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad modi repellendus, optio eveniet eligendi molestiae? Fugiat, temporibus! Close

CSS样式

模态窗口.cd-modal开始时通过visibility: hidden来隐藏，高度和宽度都设置为100%，并且使用固定定位方式。

当用户点击了触发按钮a.cd-modal-trigger，模态窗口通过.visible属性设置为可见。 .cd-modal { position: fixed; top: 0; left: 0; z-index: 3; height: 100%; width: 100%; opacity: 0; visibility: hidden;}.cd-modal.visible { opacity: 1; visibility: visible;}

div.cd-transition-layer元素用于创建喷洒墨水效果的动画过渡层。它初始时被设置为：visibility: hidden，高度和宽度都设置为100%，并且使用固定定位方式。 .cd-transition-layer { position: fixed; top: 0; left: 0; z-index: 2; height: 100%; width: 100%; opacity: 0; visibility: hidden; overflow: hidden;}

它的子元素div.bg-layer使用雪碧图作为背景图片，并设置background-size: 100%，100%高度和2500%的宽度(因为在这个DEMO中，ink.png有25帧)。开始时，ink.png的第一帧被居中放置在div.cd-transition-layer中。 .cd-transition-layer .bg-layer { position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-2%); height: 100%; /* our sprite is composed of 25 frames */ width: 2500%; background: url(../img/ink.png) no-repeat 0 0; background-size: 100% 100%;}

上面的居中方式需要注意的是，通常我们使用绝对定位居中一个元素都是使用如下的代码： position: absolute;left: 50%;top: 50%;transform: translateY(-50%) translateX(-50%);

在这个DEMO中，我们需要居中ink.png雪碧图的第一帧，由于div.bg-layer的宽度是它的父元素宽度的25倍，所以要使用translateX(-(50/25)%)来进行居中。

为了创建喷洒墨水的动画，我们需要修改div.bg-layer的值。可以定义如下的@keyframes帧动画。 @keyframes cd-sequence { 0% { transform: translateY(-50%) translateX(-2%); } 100% { transform: translateY(-50%) translateX(-98%); }}

通过上面的帧动画，在动画结束时，ink.png雪碧图的最后一帧将在div.cd-transition-layer中居中。

对于上面100%时的translateX的值可以这样理解：由于DEMO中有25个帧，为了显示最后一个帧你需要移动.bg-layer层-100% * (25 – 1) = -96%。接着需要使最后一帧居中显示，就需要额外的调整-2%，所以最后translateX()的值为-98%。

当用户点击了触发按钮a.cd-modal-trigger时，.cd-transition-layer会被添加.visible class类使其可见，同时通过.opening class类来触发喷洒墨水动画。 .cd-transition-layer.visible { opacity: 1; visibility: visible;}.cd-transition-layer.opening .bg-layer { animation: cd-sprite 0.8s steps(24); animation-fill-mode: forwards;}

JavaScript

DEMO中在用户点击触发按钮和关闭模态窗口按钮时通过jQuery来添加和移除相应的class类。

另外，还使用jQuery来调整png图片的比例使它们不至于变形。在样式文件中，.bg-layer的每一帧的宽度和高度都被设置为和视口一样大小。但是用户显示器的视口可能会是不同的比例，这会导致某些帧不能完全显示。

setLayerDimensions()函数正是用于修正这些问题的。 var frameProportion = 1.78, //png frame aspect ratio frames = 25, //number of png frames resize = false; //set transitionBackground dimentionssetLayerDimensions();$(window).on('resize', function(){ if( !resize ) { resize = true; (!window.requestAnimationFrame) ? setTimeout(setLayerDimensions, 300) : window.requestAnimationFrame(setLayerDimensions); }}); function setLayerDimensions() { var windowWidth = $(window).width(), windowHeight = $(window).height(), layerHeight, layerWidth; if( windowWidth/windowHeight > frameProportion ) { layerWidth = windowWidth; layerHeight = layerWidth/frameProportion; } else { layerHeight = windowHeight; layerWidth = layerHeight*frameProportion; } transitionBackground.css({ 'width': layerWidth*frames+'px', 'height': layerHeight+'px', }); resize = false;}

来源：jQuery之家

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网