使用Angular.js实现自定义的Addthis社交分享插件界面和指令

Custom addthis Directives

angular，share

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2478
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

}).call(this);

编译

CSS

/* Styles go here */

@import url(http://fonts.googleapis.com/css?family=Raleway:300,700);
body {
    background: #217ee7;
    font-family: 'Raleway';
}
h2 {
    margin-top: 30px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    text-align: center;
    animation: blink 0.5s infinite ease-out;
}
.addthis_toolbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 5px 5px;
    background: #333;
    border-radius: 6px;
}
.addthis_toolbox a {
    color: white;
    white-space: nowrap;
}
.addthis_toolbox i {
    padding: 15px 30px;
    font-size: 30px;
    transition: all 0.2s ease;
}
.addthis_toolbox i:hover {
    transform: scale(1.2);
}
.addthis_toolbox .fa-facebook:after,
.addthis_toolbox .fa-twitter:after,
.addthis_toolbox .fa-plus:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    content: 'Facebook';
    top: 80px;
    left: 50%;
    font-family: 'Raleway';
    font-size: 18px;
}
.addthis_toolbox .fa-facebook:hover {
    background: #3b5998;
}
.addthis_toolbox .fa-facebook:hover:after,
.addthis_toolbox .fa-twitter:hover:after,
.addthis_toolbox .fa-plus:hover:after {
    display: block;
}
.addthis_toolbox .fa-twitter:after {
    content: 'Twitter';
}
.addthis_toolbox .fa-twitter:hover {
    background: #00aced;
}
.addthis_toolbox .fa-twitter:hover:after {
    display: block;
}
.addthis_toolbox .fa-plus:after {
    content: 'More';
}
.addthis_toolbox .fa-plus:hover {
    background: gold;
}
.addthis_toolbox .fa-plus:hover:after {
    display: block;
}
.addthis_toolbox .addthis_button_more {
    outline: none;
}
@keyframes blink {
    50% {
        opacity: 0;
    }
}

HTML

Custom addthis Directives

angular，share

编辑器支持Emmet

快捷键

Custom addthis Directives

angular，share

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：