Fontawesome 图标字体悬停轮廓动效

Icon Font outline hover-effect

outline

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1881
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.container:after {
    content: " ";
    display: block;
    clear: both;
}
body {
    background: #fbfcf6;
    color: #8170cf;
    font-family: 'Source Code Pro';
}
h1 {
    font-size: 40px;
    line-height: 56px;
}
.icons {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
}
.icons i {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}
.icons + .icons {
    margin-top: 50px;
}
.fa {
    font-size: 50px;
    cursor: pointer;
    color: #302369;
    text-shadow: -1px -1px 0 transparent, 1px -1px 0 transparent, -1px 1px 0 transparent, 1px 1px 0 transparent;
    -webkit-transition: 0.6s ease;
    transition: 0.6s ease;
}
.fa:hover {
    color: #fbfcf6;
    text-shadow: -1px -1px 0 #302369, 1px -1px 0 #302369, -1px 1px 0 #302369, 1px 1px 0 #302369;
}
.fa + .fa {
    margin-left: 10px;
}
p {
    margin-bottom: 25px;
}

HTML

Icon Font outline hover-effect

outline

编辑器支持Emmet

快捷键

Icon Font outline hover-effect

outline

three.js使用OutlinePass给3D对象添加轮廓线 | 边框线 | 高亮边缘

WebGL Three.js草图（素描）风格渲染实例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：