您目前使用的浏览器该进博物馆啦~~~
为了更佳的浏览体验，请使用现代浏览器访问本站
Outdated Browser
您的浏览器已禁用 Javascript，启用它获得更好的体验。
Outdated Browser
这是为桌面用户准备的工具，但您可以安心在这里浏览
46.5% 的互联网用户在使用 此款浏览器
GOOGLE CHROME
支持如下操作系统
16.5% 的互联网用户在使用 此款浏览器
MOZILLA FIREFOX
支持如下操作系统
21.6% 的互联网用户在使用 此款浏览器
INTERNET EXPLORER
支持如下操作系统
10.3% 的互联网用户在使用 此款浏览器
APPLE SAFARI
支持如下操作系统
1.5% 的互联网用户在使用 此款浏览器
支持如下操作系统
冷静 这是为桌面用户提供的不是为手机用户提供的结合 SVG 实现的超酷炫的加载动画效果
[问题点数：40分]
结合 SVG 实现的超酷炫的加载动画效果
[问题点数：40分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2015年7月 Web 开发大版内专家分月排行榜第三
2015年11月 总版技术专家分月排行榜第二2015年10月 总版技术专家分月排行榜第二
优秀小版主
2015年7月 Web 开发大版内专家分月排行榜第三
2009年9月 总版技术专家分月排行榜第一
2009年8月 总版技术专家分月排行榜第二
匿名用户不能发表回复！|
每天回帖即可获得10分可用分！小技巧：
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN，不得违反国家法律法规。
转载文章请注明出自“CSDN（www.csdn.net）”。如是商业用途请联系原作者。html5 svg和css3超酷模态窗口动画特效
当前位置： >
> html5 svg和css3超酷模态窗口动画特效
这是一款使用html5 svg和css3制作的超酷模态窗口动画特效插件。该模态窗口特效共分6大类17种不同的效果。最后5种效果使用html5 svg和js制作，其余特效使用css3和js制作而成。
浏览器兼容性
这是一款html5 svg和css3超酷模态窗口动画特效插件。它和有异曲同工之妙。在这款插件中包含了一些有趣的动画效果和SVG变形技术。
注意：似乎IE11不支持在transform中使用calc()。
html结构相当简单：
&div id="somedialog" class="dialog"&
&div class="dialog__overlay"&&/div&
&div class="dialog__content"&
&h2&&strong&Howdy&/strong&, I'm a dialog box&/h2&&
div&&button class="action" data-dialog-close&Close&/button&&/div&
下面是模态窗口的基本样式：
.dialog__overlay {
width: 100%;
height: 100%;
align-items:
justify-content:
pointer-events:
.dialog__overlay {
z-index: 1;
background: rgba(55, 58, 71, 0.9);
opacity: 0;
transition: opacity 0.3s;
.dialog--open .dialog__overlay {
opacity: 1;
pointer-events:
.dialog__content {
width: 50%;
max-width: 560
min-width: 290
background: #
padding: 4
text-align:
z-index: 5;
opacity: 0;
.dialog--open .dialog__content {
pointer-events:
/* Content */
.dialog h2 {
margin: 0;
font-weight: 400;
font-size: 2
padding: 0 0 2
margin: 0;
我们在.dialog上使用flexbox是为了让对话框的内容居中。注意：IE11以下的IE浏览器不支持pointer事件。
某些效果中有一些额外的div,在开始时他们是隐藏的，模态窗口动画结束后它们以fade in的方式出现，这是为了制作缩放和扭曲的效果。
下面是Sandra模态窗口动画效果的css代码：
.dialog.dialog--open .dialog__content,
.dialog.dialog--close .dialog__content {
animation-duration: 0.3s;
animation-fill-mode:
.dialog.dialog--open .dialog__content {
animation-name: anim-
.dialog.dialog--close .dialog__content {
animation-name: anim-
@keyframes anim-open {
0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
100% { opacity: 1; transform: scale3d(1, 1, 1); }
@keyframes anim-close {
0% { opacity: 1; }
100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
通过添加dialog--open和dialog--close类，我们可以很好的控制模态窗口和它里面的内容。
下面是控制模态窗口的js代码：
;( function( window ) {
'use strict';
var support = { animations : Modernizr.cssanimations },
animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
onEndAnimation = function( el, callback ) {
var onEndCallbackFn = function( ev ) {
if( support.animations ) {
if( ev.target != this )
this.removeEventListener( animEndEventName, onEndCallbackFn );
if( callback && typeof callback === 'function' ) { callback.call(); }
if( support.animations ) {
el.addEventListener( animEndEventName, onEndCallbackFn );
onEndCallbackFn();
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
function DialogFx( el, options ) {
this.options = extend( {}, this.options );
extend( this.options, options );
this.ctrlClose = this.el.querySelector( '[data-dialog-close]' );
this.isOpen =
this._initEvents();
DialogFx.prototype.options = {
// callbacks
onOpenDialog : function() { },
onCloseDialog : function() { }
DialogFx.prototype._initEvents = function() {
var self =
// close action
this.ctrlClose.addEventListener( 'click', this.toggle.bind(this) );
// esc key closes dialog
document.addEventListener( 'keydown', function( ev ) {
var keyCode = ev.keyCode || ev.
if( keyCode === 27 && self.isOpen ) {
self.toggle();
this.el.querySelector( '.dialog__overlay' ).addEventListener( 'click', this.toggle.bind(this) );
DialogFx.prototype.toggle = function() {
var self =
if( this.isOpen ) {
classie.remove( this.el, 'dialog--open' );
classie.add( self.el, 'dialog--close' );
onEndAnimation( this.el.querySelector( '.dialog__content' ), function() {
classie.remove( self.el, 'dialog--close' );
// callback on close
this.options.onCloseDialog( this );
classie.add( this.el, 'dialog--open' );
// callback on open
this.options.onOpenDialog( this );
this.isOpen = !this.isO
// add to global namespace
window.DialogFx = DialogFx;
})( window );
我们也能够想下面这样调用模态窗口：
&script src="js/classie.js"&&/script&
&script src="js/dialogFx.js"&&/script&
(function() {
var dlgtrigger = document.querySelector( '[data-dialog]' ),
somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
dlg = new DialogFx( somedialog );
dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
以上是通过data-属性的data-dialog="somedialog"来触发控制按钮。
插件中的SVG效果（除了Wilma效果）都是使用来做路径变形动画。我们添加SVG图形到模态窗口的内容中，然后在data-morph-open中定义不同的路径变形动画。
(function() {
var dlgtrigger = document.querySelector( '[data-dialog]' ),
somedialog = document.getElementById( dlgtrigger.getAttribute( 'data-dialog' ) ),
morphEl = somedialog.querySelector( '.morph-shape' ),
s = Snap( morphEl.querySelector( 'svg' ) ),
path = s.select( 'path' ),
initialPath = path.attr('d'),
open : morphEl.getAttribute( 'data-morph-open' )
dlg = new DialogFx( somedialog, {
onOpenDialog : function( instance ) {
// reset path
morphEl.querySelector( 'svg > path' ).setAttribute( 'd', initialPath );
// animate path
path.stop().animate( { 'path' : steps.open }, 300, mina.easein );
dlgtrigger.addEventListener( 'click', dlg.toggle.bind(dlg) );
在Safari浏览器中透视效果似乎有些问题，你想了解更多可以阅读：。
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！收藏，1.9k 浏览
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我使用snap.svg写了一个页面，页面包含一个很简单的svg，代码大致如下：
&svg id="svg" width="100%" height="900px"&&/svg&
&script type="text/javascript" src="snap.svg-min.js"&&/script&
&script type="text/javascript"&
// Simple dashed pattern on circle
var s = Snap("#svg");
// This will be our shape. It could be anything.
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
stroke: "#000",
strokeWidth: 5
我在华为c8815手机上做测试，安卓版本为4.1.2，或许是不支持SVG,所以页面上没有正常显示图形，而是提示
Created with Snap
不兼容是正常的，但是我却发现有一个页面在这个手机上却是兼容的，
这个页面是增加了什么插件，还是使用了什么方法，可以是svg在这个测试的机型上兼容。
测试机型：华为c8815，安卓版本为4.1.2，浏览器为微信6.0安卓版内置浏览器、系统内置浏览器，qq浏览器（不兼容）
=======================================华丽丽分割线====================================
恩 用了纯正的svg写了，再测试的时候，发现正常的的确在测试机型的微信浏览器是可行的。然后测试了animateTransform也都是可以的。但是当我测试用css3结合做素描动画的时候这个测试机型就不能兼容了。
测试代码如下：
&style type="text/css"&
stroke-dasharray:100;
stroke-dashoffset:100;
-webkit-animation: dash 3s ease-in-
animation: dash 3s ease-in-
-webkit-animation-fill-mode:
animation-fill-mode:
@-webkit-keyframes dash {
stroke:#f00;
stroke-dashoffset: 0;
@keyframes dash {
stroke:#f00;
stroke-dashoffset: 0;
&svg id="svg" width="100%" height="500px"
xmlns="http://www.w3.org/2000/svg"&
&polyline points="0,0 0,20 20,20 20,40 40,40 40,60" style="fill:stroke:stroke-width:5" id="line" /&
=======================================华丽丽分割线==================================
更新，使用snap库可以兼容以上测试机型*/
完整 测试代码如下：
&!doctype html&
&meta charset="utf-8" /&
&meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&
&svg id="svg" width="100%" height="500px" xmlns="http://www.w3.org/2000/svg"&
&path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274" style="fill:stroke:stroke-width:5" id="line" /&
&script type="text/javascript" src="snap.svg-min.js"&&/script&
&script type="text/javascript"&
var s = Snap("#svg");
var line = s.select('#line');
var linelen = line.getTotalLength();
line.attr({
strokeDasharray:linelen,
strokeDashoffset:linelen
line.animate({strokeDashoffset:0},3e3);
这段代码测试，使用snap的animate方法来写的动画，在测试机型上已经兼容。所以应该是css3方式去写的会有兼容性的问题。如果有人测试有问题的话，欢迎补充反馈~！！！
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我想说，并不是 SVG 的错好么，要是真想测试兼容性的话就应该堂堂正正的直接写出 SVG 出来啊！
SVG 的兼容性可见
，从上面可以看出，Android 4.1.2 版本虽然支持不完全，但是注中给出说明只是不太支持 mask ，你的这个简单测试应该是没问题的。
而元凶 Snap 的兼容性可见官方描述：
Currently, the most popular library for working with SVG is Rapha?l. One of the primary reasons Rapha?l became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Rapha?l (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting more modern browsers means that Snap can support features like masking, clipping, patterns, full gradients, groups, and more.
所以似乎你可能要换个库了？
分享到微博？
与我们一起探索更多的未知
专业的开发者技术社区，为用户提供多样化的线上知识交流，丰富的线下活动及给力的工作机会
加入只需一步
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要举报该，理由是：
扫扫下载 App
SegmentFault
一起探索更多未知