基于HTML5 SVG和Raphaël.js的混合图标动画特效插件教程

2019独角兽企业重金招聘Python工程师标准>>>

一、安装
$ npm install hybicon
$ bower install hybicon        

二、使用方法
<script src="js/required/raphael.min.js"></script>
<script src="js/hybicon.min.js"></script>       

三、Html结构
<div data-hybicon="icon1-icon2"></div>
图标的位置可以通过data-hybicon-positioning属性来设置。
<div data-hybicon="github-star"
data-hybicon-positioning="topright|center|topleft"></div>

(1)鼠标滑过模式
通过设置data-hybicon-hovermode属性可以制作第二个图标在鼠标滑过时的动画效果。
<div data-hybicon="code-fave" data-hybicon-hovermode="show|rotate|switch"></div>

(2)鼠标点击模式
通过设置data-hybicon-clickmode属性可以制作第二个图标在鼠标点击时的动画效果。
<div data-hybicon="icon1-icon2" data-hybicon-clickmode="show|rotate|switch"></div>

(3)信息模式
<div data-hybicon="download-code"
data-hybicon-infomode="show|right-*width*"
data-hybicon-infotext="*your text*">
</div>

(4)超链接
如果需要为图标添加超链接，可以简单的使用一个<a>元素来包裹<div>元素。
<a href="documentation.html#hyperlink"><div data-hybicon="link"></div></a>

(5)高级模式
<div data-hybicon="arrowright-arrowright"
data-hybicon-icon1init="20,50,25,0"
data-hybicon-icon1anim="35,50,30,180"
data-hybicon-icon2init="80,50,25,180"
data-hybicon-icon2anim="65,50,30,0"
data-hybicon-animtime="600"
data-hybicon-animease="bounce"
data-hybicon-clickmode>
</div>

(6)使用第三方图标
var myIcons={
triangle: "M0,100,L100,100,L50,20,z",
rectangle: "M0,0,L100,0,L100,100,L0,100,z"
}   
             
<div data-hybicon-iconclass="myIcons"
data-hybicon="triangle-rectangle"
data-hybicon-clickmode="rotate">
<div>

(7)图标的对齐方式
<div data-hybicon="icons" data-hybicon-align="left|center|right""></div>                       

(8)图片的尺寸
<div data-hybicon data-hybicon-size="unit in px|'css' for responsive behaviour""></div>     
 
(9)图标的背景颜色
<div data-hybicon="github-star" data-hybicon-background="as CSS background"></div>

(10)图标的颜色
<div data-hybicon="github-star" data-hybicon-color="as CSS color"></div>

(11)图标的边框
<div data-hybicon="github-star" data-hybicon-border="as CSS border"></div>

(12)圆角边框
<div data-hybicon="github-star" data-hybicon-borderradius="as CSS border-radius"></div>

四、CSS样式
<div id="myHybicon"
data-hybicon="user-idea"
data-hybicon-hovermode="switch"
data-hybicon-infomode
data-hybicon-size="css">
</div>
               
#myHybicon {
width: 222px;
height: 222px;
}

#myHybicon-svg {
background: #FFF;
border-radius: 15%;
}

#myHybicon-icon1 {
fill: #333;
}

#myHybicon-icon2 {
fill: #FFF;
stroke: #F6921E;
stroke-width: 0.5;
}

#myHybicon-info {
fill: #604c3b;
stroke: #604c3b;
stroke-width: 3;
}

#myHybicon-infotext {
fill: #FFF;
font: 11px Impact, sans-serif;
}

KeyMob是国内最专一的移动广告联盟,通过整合广告主和移动互联网络资源, 为广告主快速提升产品业绩和品牌形象,为广告主创造更大的价值。               

转载于:https://my.oschina.net/u/2505907/blog/600582