html5 svg和css3超酷图标动画特效
当前位置： >
> html5 svg和css3超酷图标动画特效
这是一款使用html5&SnapSVG和css3制作的超酷图标动画特效。该动画特效包括圆形进度条动画和一组房子图标的动画特效。
浏览器兼容性
这个简要教程是关于如何使用snap.svg库和css来制作图标动画的教程。、
现在越来越多的网站开始使用SVG。随着大量高分辨率的显示器被广泛的使用，通过CSS媒体查询技术已经不能够满足同一张位图在不同显示器上显示相同效果的需求。我们需要依赖与矢量图形来完成这一工作。
在本教程制作的这个插件中，我们将一步步的使用CSS和来对图标完成一系列的动画效果。Snap.svg是Adobe公司的一个javascript SVG库。虽然对大多数浏览器对这个库的支持不够完美，但是我们可以从中学习到一些小技巧。
如果你刚刚接触SVG，下面的文章你可以用于学习参考：
最简单创建SVG文件的方法是使用矢量图形编辑器，如： Adobe Illustrator或Sketch。选择其中一款来创建图标，你使用这些编辑器创建的SCG 图标是能够通过程序转换为代码的。最简单的实现方法是将它保持为.SVG文件。然后使用文本编辑器打开即可看到代码。
请记住一点，使用多层的方式来创建图形是会影响代码输出的。
举个例子：我们的动画分为两步：一是圆形进度条加载，二是房子动画。看下图，如果关闭 cd-buildings 层，我们能够通过在该元素上使用 display:none 来在代码中使其不可见。在Illustrator中层和组都可以在SVG代码得以体现。在AI中，层的标题将以#id的方式在SVG代码中出现。
下面是第一个demo中如何在嵌入屏幕的手机界面中添加动画的css代码：
当使用AI输出.svg文件，使用默认的配置就可以了。特别提出的是，将 CSS Properties 设置为Style Elements，可以讲样式从内容中分离。
在使用矢量图形编辑器创建SVG文件时，你需要注意：
你创建的层和组将影响你的输出代码。
每个层都要给一个名字。
尽量使用简单的图形及去掉不必要的锚点（在AI中你可以试一下：object>Path>Simplify）。
尽量不要使用矢量化笔触。你可以在后面生成的代码中使用它们。
没有一个SVG矢量编辑器是完全兼容的。AI有自己的SVG过滤器，但并不保证所有的浏览器都兼容它。
在这里要推荐给大家一款自动清理SVG代码的工具 。
当我们使用AI输出了SVG文件，我们使用文本编辑器打开它来看一些代码：
&?xml version=&1.0& encoding=&utf-8&?&
&!-- Generator: Adobe Illustrator 18.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)
&!DOCTYPE svg PUBLIC &-//W3C//DTD SVG 1.1//EN& &http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&&
&svg version=&1.1& xmlns=&http://www.w3.org/2000/svg& xmlns:xlink=&http://www.w3.org/1999/xlink& x=&0px& y=&0px& width=&200px&
height=&200px& viewBox=&0 0 200 200& style=&enable-background:new 0 0 200 200;& xml:space=&preserve&&
&style type=&text/css&&
.st0{fill:stroke:#D7DCE0;stroke-width:4;stroke-miterlimit:10;}
.st1{fill:stroke:#A84D54;stroke-width:4;stroke-miterlimit:10;}
.st2{opacity:0;fill:#FFFFFF;}
.st3{fill:#223443;}
.st4{fill:#FFFFFF;stroke:#223443;stroke-width:4;stroke-miterlimit:10;}
.st5{fill:stroke:#223443;stroke-width:4;stroke-miterlimit:10;}
&g id=&cd-loading&&
&g id=&cd-circle&&
&circle id=&cd-loading-circle& class=&st0& cx=&100& cy=&100& r=&77.5&/&
&circle id=&cd-loading-circle-filled& class=&st1& cx=&100& cy=&100& r=&77.5&/&
&g id=&cd-play-btn&&
&rect x=&84& y=&78.1& class=&st2& width=&32& height=&43.9&/&
&polygon class=&st3& points=&84,78.1 116,100 84,121.9
&g id=&cd-pause-btn&&
&rect x=&81& y=&80.1& class=&st2& width=&38& height=&39.9&/&
&rect x=&81& y=&80.1& class=&st3& width=&11& height=&39.9&/&
&rect x=&108& y=&80.1& class=&st3& width=&11& height=&39.9&/&
&g id=&cd-buildings&&
&g id=&cd-home-3&&
&rect id=&cd-home-3-base& x=&66& y=&55& class=&st4& width=&58& height=&123&/&
&polygon id=&cd-home-3-roof& class=&st4& points=&59.4,56 95,15 130.6,56
&circle id=&cd-home-3-window& class=&st4& cx=&95& cy=&77& r=&11&/&
&g id=&cd-home-2&&
&rect id=&cd-home-2-base& x=&98& y=&132& class=&st4& width=&69& height=&46&/&
&rect id=&cd-home-2-roof& x=&98& y=&122& class=&st4& width=&69& height=&10&/&
&rect id=&cd-home-2-door& x=&141& y=&155& class=&st4& width=&15& height=&22&/&
&rect id=&cd-home-2-window& x=&106& y=&143& class=&st4& width=&25& height=&9&/&
&g id=&cd-home-1&&
&rect id=&cd-home-1-base& x=&29& y=&109& class=&st4& width=&69& height=&69&/&
&rect id=&cd-home-1-roof& x=&23& y=&100& class=&st4& width=&80& height=&9&/&
&rect id=&cd-home-1-door& x=&53& y=&151& class=&st4& width=&20& height=&27&/&
&rect id=&cd-home-1-window& x=&53& y=&121& class=&st4& width=&20& height=&18&/&
&rect id=&cd-home-1-chimney& x=&34& y=&89& class=&st4& width=&11& height=&11&/&
&line id=&cd-floor& class=&st5& x1=&2& y1=&178& x2=&198& y2=&178&/&
&g id=&cd-cloud-1&&
&line class=&st0& x1=&5& y1=&13& x2=&29& y2=&13&/&
&line class=&st0& x1=&35& y1=&13& x2=&44& y2=&13&/&
&line class=&st0& x1=&72& y1=&27& x2=&14& y2=&27&/&
&g id=&cd-cloud-2&&
&line class=&st0& x1=&191& y1=&68& x2=&159& y2=&68&/&
&line class=&st0& x1=&153& y1=&68& x2=&144& y2=&68&/&
&line class=&st0& x1=&179& y1=&83& x2=&133& y2=&83&/&
可以发现，Illustrator 为我们创建了一些样式。代码页是否简洁，通过在AI中给层和组添加名字，我们可以在SVG代码结构中很容易的发现它们。
现在，如果想在同一个文件内容使用这个SVG图形，可以创建&svg&&/svg&标签，然后将上边的SVG代码粘贴到里面。
&svg version=&1.1& x=&0px& y=&0px& width=&200px& height=&200px& viewBox=&0 0 200 200& style=&enable-background:new 0 0 200 200;& xml:space=&preserve&&
&title&Buildings&/title&
&desc&3 minimal buildings with floating clouds&/desc&
&style type=&text/css&&
&!-- ... --&
&!-- SVG elements here --&
接下来，书写我们的CSS样式：
/* --------------------------------
Manage colors
-------------------------------- */
.cd-stroke {
stroke-width: 4;
stroke-miterlimit: 10;
.cd-stroke-color-1 {
stroke: #223443;
fill: #f8f8f8;
.cd-stroke-color-1#floor {
.cd-stroke-color-2 {
stroke: #D7DCE0;
.cd-stroke-color-3 {
stroke: #A84D54;
.cd-fill-color-1 {
fill: #223443;
.cd-pointer {
fill: #FFFFFF;
opacity: 0;
现在我们可以删除SVG文件自带的样式，而使用我们的样式来渲染SVG图形。
在插件中，我们对SVG结构做了一些修改：将某些标签从上边移动到下边。原因是在SVG文件中，元素排在越后面它的
z-index 越高。还有就是修改了一些元素的坐标值。
&svg id=&cd-animated-svg& version=&1.1& x=&0px& y=&0px& width=&200px& height=&200px& viewBox=&0 0 200 200& style=&enable-background:new 0 0 200 200;& xml:space=&preserve&&
&title&Buildings&/title&
&desc&3 minimal buildings with floating clouds&/desc&
&g id=&cd-loading&&
&g id=&cd-circle&&
&circle id=&cd-loading-circle& class=&cd-stroke cd-stroke-color-2& cx=&100& cy=&100& r=&77.5&/&
&circle id=&cd-loading-circle-filled& class=&cd-stroke cd-stroke-color-3& cx=&100& cy=&100& r=&77.5&/&
&g id=&cd-play-btn&&
&rect class=&cd-pointer& x=&84& y=&78& width=&33& height=&44&/&
&polygon class=&cd-fill-color-1& points=&84,78 116,100 84,122
&g id=&cd-pause-btn&&
&rect class=&cd-pointer& x=&81& y=&80& width=&38& height=&40&/&
&rect class=&cd-fill-color-1& x=&81& y=&80& width=&11& height=&40&/&
&rect class=&cd-fill-color-1& x=&108& y=&80& width=&11& height=&40&/&
&g id=&cd-buildings&&
&g id=&cd-cloud-1&&
&line class=&cd-stroke cd-stroke-color-2& x1=&5& y1=&13& x2=&29& y2=&13&/&
&line class=&cd-stroke cd-stroke-color-2& x1=&35& y1=&13& x2=&44& y2=&13&/&
&line class=&cd-stroke cd-stroke-color-2& x1=&72& y1=&27& x2=&14& y2=&27&/&
&g id=&cd-cloud-2&&
&line class=&cd-stroke cd-stroke-color-2& x1=&191& y1=&68& x2=&159& y2=&68&/&
&line class=&cd-stroke cd-stroke-color-2& x1=&153& y1=&68& x2=&144& y2=&68&/&
&line class=&cd-stroke cd-stroke-color-2& x1=&179& y1=&83& x2=&133& y2=&83&/&
&g id=&cd-home-3&&
&polygon id=&cd-home-3-roof& class=&cd-stroke cd-stroke-color-1& points=&59.4,55 95,15 130.6,55&/&
&rect id=&cd-home-3-base& class=&cd-stroke cd-stroke-color-1& x=&66& y=&54& width=&58& height=&124&/&
&circle id=&cd-home-3-window& class=&cd-stroke cd-stroke-color-1& cx=&95& cy=&77& r=&11&/&
&g id=&cd-home-2&&
&rect id=&cd-home-2-base& class=&cd-stroke cd-stroke-color-1& x=&98& y=&132& width=&70& height=&46&/&
&rect id=&cd-home-2-roof& class=&cd-stroke cd-stroke-color-1& x=&98& y=&122& width=&70& height=&10&/&
&rect id=&cd-home-2-door& class=&cd-stroke cd-stroke-color-1& x=&141& y=&156& width=&16& height=&22&/&
&rect id=&cd-home-2-window& class=&cd-stroke cd-stroke-color-1& x=&106& y=&143& width=&26& height=&10&/&
&g id=&cd-home-1&&
&rect id=&cd-home-1-chimney& class=&cd-stroke cd-stroke-color-1& x=&34& y=&89& width=&11& height=&11&/&
&rect id=&cd-home-1-base& class=&cd-stroke cd-stroke-color-1& x=&29& y=&108& width=&70& height=&70&/&
&rect id=&cd-home-1-roof& class=&cd-stroke cd-stroke-color-1& x=&23& y=&100& width=&81& height=&9&/&
&rect id=&cd-home-1-door& class=&cd-stroke cd-stroke-color-1& x=&53& y=&150& width=&20& height=&28&/&
&rect id=&cd-home-1-window& class=&cd-stroke cd-stroke-color-1& x=&53& y=&121& width=&20& height=&18&/&
&line id=&cd-floor& class=&cd-stroke cd-stroke-color-1& x1=&2& y1=&178& x2=&198& y2=&178&/&
现在SVG已经做好了动画准备。我们将svg 放置到一个.cd-svg-container的div中，让它相对于屏幕居中。设置max-width:100% 将使SVG具有响应性。为SVG设置overflow:hidden是为了那些“云”在画布中的动画。在这里IE浏览器可能会有一些BUG。
在#cd-pause-btn中的小方块.cd-pointer，这是为了是暂停按钮中间部分可以被点击，它被设置为opacity:0。
最后我们使用.no-js类来在浏览器不支持javascript时给出回调：不显示加载动画，只显示房子。
.cd-svg-container {
width: 90%;
max-width: 200
margin: 0 auto 100
.cd-svg-container svg {
max-width: 100%;
.no-js .cd-svg-container {
height: 200
background: url("../img/cd-icon.svg") no-
.no-js .cd-svg-container svg {
/* --------------------------------
Main elements - Loading
-------------------------------- */
#cd-loading {
opacity: 1;
visibility:
-webkit-transition: opacity .3s 0s, visibility 0s 0s;
-moz-transition: opacity .3s 0s, visibility 0s 0s;
transition: opacity .3s 0s, visibility 0s 0s;
#cd-loading.fade-out {
opacity: 0;
visibility:
-webkit-transition: opacity .3s 0s, visibility 0s .3s;
-moz-transition: opacity .3s 0s, visibility 0s .3s;
transition: opacity .3s 0s, visibility 0s .3s;
#cd-play-btn, #cd-pause-btn {
#cd-pause-btn {
pointer-events:
.play-is-clicked #cd-pause-btn {
pointer-events:
/* --------------------------------
Main elements - Buildings
-------------------------------- */
#cd-home-1-chimney, #cd-home-3-roof {
visibility:
我们使用javascript而不使用SMIL 来制作SVG动画是为了兼容IE浏览器，关于SMIL 的知识，你可以查看。在动画开始的时候，我们需要隐藏#cd-buildings。为了做到这一点，我们需要修改一下html结构。
举个例子，来看#cd-home-1-door元素，它是第一个房子的左边的门。我们希望该元素开始的时候被隐藏，然后动画时使它的高度从0增长到28px。所以，在html结构中，我们将他的高度设置为0-height = "0"，并增加一个自定义属性data-height = "28"，后面就可以使用javascript来控制它们。
&rect id=&cd-home-1-door& class=&cd-stroke cd-stroke-color-1& x=&53& y=&150& width=&20& height=&0& data-height=&28&/&
我们通过提供的animate()方法来制作动画。
var animatingSvg = Snap('#cd-animated-svg'),
buildingDoor1 = animatingSvg.select('#cd-home-1-door');
buildingDoor1.animate({'height': buildingDoor1.attr('data-height')}, 300, mina.easeinout);
现在，“门”是从上往下增长的，我们希望相反的效果，所以将它旋转180度。
&rect id=&cd-home-1-door& class=&cd-stroke cd-stroke-color-1& x=&53& y=&150& width=&20& height=&0& transform=&rotate(180 63 164)& data-height=&28&/&
这里需要指出，开始时我们使用CSS来旋转它，这样做比在SVG中使用transform属性要好，但是IE11及以下的IE浏览器不支持在SVG上使用CSS transformations。
rotate()函数接受3个参数：第一个是旋转角度，第二个和第三个是旋转中心的坐标。
现在来关注加载动画。首先，我们隐藏暂停按钮。我们为它使用一个缩放（scale）的transformation。
&g id=&cd-pause-btn& transform=&translate(100 100) scale(0)&&
&!-- .... --&
注意：scale()方法不能够想transform那样使用坐标原点（transform默认坐标原点是左上角）。要缩放一个元素，你可以通过给定一个比例因子，结合两个transform来实现：
transform="translate(-centerX(factor- 1) -centerY(factor- 1)) scale(factor)"
在我们的例子中，比例因子 factor=0，(centerX, centerY) = (100, 100)，我们也为transform使用translate(100 100) 。
接着，我们需要制作圆形进度条动画。为了制作这个动画，我们使用两个svg属性 stroke-dasharray 和 stroke-dashoffset。 stroke-dasharray 指定圆形的高度和间隙， stroke-dashoffset用于制作加载动画。
var loadingCircle = animatingSvg.select('#cd-loading-circle-filled'),
circumf = Math.PI*(loadingCircle.attr('r')*2);
loadingCircle.attr({
'stroke-dasharray': circumf+' '+circumf,
'stroke-dashoffset': circumf,
通过这个方法，我们设置圆和间隙都等于圆的周长。通过设置stroke-dashoffset: circumf 使得只有间隙可见。为了制作加载动画，我们使用javascript操控stroke-dashoffset 属性。
var playBtn = animatingSvg.select('#cd-play-btn').
playBtn.click(function(){
var strokeOffset = loadingCircle.attr('stroke-dashoffset').replace('px', '');
//animate strokeOffeset desn't work with circle element - we need to use Snap.animate() rather than loadingCircle.animate()
globalAnimation = Snap.animate(strokeOffset, '0', function( value ){
loadingCircle.attr({ 'stroke-dashoffset': value })
}, 1500, mina.easein
注意：stroke-dashoffset 属性不能够使用animate()方法来制作动画（当它作为一个路径元素的时候）。这是我们为什么使用Snap.animate()方法，将动画返回对象保持到globalAnimation 变量中的原因-为了在用户点击暂停按钮时停止动画。
var pauseBtn = animatingSvg.select('#cd-pause-btn');
pauseBtn.click(function(){
//pause the animation on the loadingCircle
globalAnimation.stop();
当加载动画完成之后，我们使用相同的技术来完成房子和云的动画。
本文版权属于jQuery之家，转载请注明出处：
您已经顶过了哦！查看:2853|回复：10
助理工程师
模拟器是3rd，用了2种方法做都未成功
1.svg方式：替换了gfx下的.svg文件，在模拟器中现在，真机不显示。。。
2.bitmap方式：第一步就做的不对，在mmp文件中我写了
AIF& &Test.aif& &..\aif& &Test.rss& &c12& &Test.bmp& &Test_mask.bmp& &Test.bmp& &Test_mask.bmp& &
然后报错说cpp啥的有错误，谢谢
助理工程师
三版中将svg类型装换成svg-t，在SDK中如下地址可以找到
C:\Symbian\9.2\S60_3rd_FP1\S60Tools\svg2svgt\installer
转换好后，将其覆盖掉工程中gfx文件夹下的 xxx.svg
另外2中&&aif&&属于二版中的格式，不知道楼主又没什么用
助理工程师
兄弟，你的方法我试过了，之前先用的做图软件保存成svg格式，然后用你说的那个工具转的，模拟器没有问题，就是真机显示不出来
初级工程师
最好用MR sdk build arm版本，sdk tools不兼容。
助理工程师
以前我的svg就死活不出来，后来问了愣愣哥才知道的，在此再次感谢愣愣哥
助理工程师
我也遇过这个问题，，，，
会不会是图标没设置大小啊？？？
试试。。。。AknIconUtils：：SetSize ()
初级工程师
你是哪个型号的手机？
助理工程师
V哥太客气了～～～
楼主你用3rd mr sdk中的mifconv.exe覆盖3rd fp1 sdk中的mifconv.exe，再重新编译打包，应该就可以了。
助理工程师
我遇到过一次是因为手机不能自己更新到最近的svg图标， 本来做对了，但是总显示错的。
办法是每次安装完毕以后都重启一下机器。
--人笨办法土，楼主见谅 :-)
初级工程师
我的就不知道什么问题了 晕 啊
助理工程师
我用ImageToSvg这个工具把图转成svg后能正常使用
Copyright&
本论坛言论纯属发布者个人意见，不代表51CTO网站立场！如有疑义，请与管理员联系：脚本简介html5 svg图标手机菜单特效是一款适合手机端展开收缩html5导航菜单特效。
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
各线路极速下载器通过p2p加速功能，帮助用户对于大文件能更好的加速下载。
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系(#换@)，我们将尽快处理。
& CopyRight , , Inc.All Rights Reserved.使用提示：
小提示：如果是HTML5 / CSS3特效请使用高级浏览器查看，如：chrome,Firefox,IE9及以上版本浏览器！
版权声明：
大头网为非营利性站点，所有资源均是网上搜集或网友上传仅供学习参考之用，请勿用于商业用途，否则产生的一切后果将由您自己承担，本站将不对任何资源负法 律责任。除部分原创作品外，本站不享有版权，如果侵犯了您的版权，请及时与我们联系(#换成@),我们将在72小时内删除。
大头网提醒您
本站永久网址请您记住，方便下次访问！如忘记网址您也可搜索进入本站。
热门特效推荐
您可能喜欢的/Xihuan