纯CSS3实现的Twitter图标

Pure CSS Twitter icon.

icon

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

/* Font by Bennett Feely http://codepen.io/bennettfeely/pen/GCAKJ */

@font-face {
    font-family: icon;
    src: url('http://bennettfeely.com/fonts/icons.woff');
}
section {
    overflow: hidden;
    position: relative;
    margin: 30px auto auto;
    width: 250px;
    height: 250px;
    background-image: -moz-linear-gradient(90deg, #1f96e2 0%, #093a68 100%);
    background-image: -o-linear-gradient(90deg, #1f96e2 0%, #0d518f 100%);
    background-image: -webkit-linear-gradient(90deg, #2aaaf8 0%, #093a68 100%);
    background-image: linear-gradient(90deg, #1f96e2 0%, #093a68 100%);
    border-radius: 50px;
    font-family: icon;
    border-bottom: 2px solid #6c635e;
    box-shadow: 0px 3px 3px #919191;
}
section:after {
    position: absolute;
    top: -65px;
    left: -25px;
    content: "";
    border-radius: 100%;
    width: 300px;
    height: 200px;
    background: rgba(225, 225, 225, 0.2);
}
p {
    position: relative;
    z-index: 1;
    text-align: center;
    margin: 0;
    padding: 0;
    padding-top: 18.4%;
    color: white;
    font-size: 10em;
    text-shadow: 5px 5px 14px rgba(0, 0, 0, 0.2);
}
footer {
    text-align: center;
    padding-top: 30px;
    font-family: "Arial";
    font-size: 11px;
    color: rgba(0, 0, 0, 0.8);
}
a:link,
a:visited {
    color: #111;
    text-decoration: none;
    border-bottom: 1px dotted;
}
a:hover {
    color: black;
}

HTML

Pure CSS Twitter icon.

icon

编辑器支持Emmet

快捷键

Pure CSS Twitter icon.

icon

react.js实现3d svg游戏手柄图标

使用纯CSS实现的一组餐厅常用图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：