会抖动盖子的垃圾桶小图标

trash icon 简单实用的一个效果。

css3, icon

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    height: 100%;
}
.trash {
    position: relative;
    display: inline-block;
    width: 8px;
    height: 10px;
    border: 2px solid #000;
    border-top: 0;
    border-radius: 0 0 2px 2px;
    background: none;
    box-shadow: none;
    transition: all 0.3s ease;
}
.trash:before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    height: 2px;
    width: 14px;
    background: #000;
    border-radius: 2px;
    transform: rotate(0);
}
.trash:after {
    content: '';
    position: absolute;
    top: -4px;
    left: 1px;
    width: 6px;
    height: 1px;
    background: #000;
    transform: rotate(0);
}
.trash:hover {
    box-shadow: inset 0 -7px 0 #000;
}
.trash:hover:before,
.trash:hover:after {
    animation: shake 0.2s linear infinite;
}
.trash:active {
    box-shadow: none;
    transform: scale(0.75);
}
.trash:active:before,
.trash:active:after {
    animation: none;
}
.tbl {
    display: table;
    width: 100%;
    height: 100%;
}
.cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
@-moz-keyframes shake {
    from {
        transform: rotate(5deg);
    }
    to {
        transform: rotate(-5deg);
    }
}
@-webkit-keyframes shake {
    from {
        transform: rotate(5deg);
    }
    to {
        transform: rotate(-5deg);
    }
}
@-o-keyframes shake {
    from {
        transform: rotate(5deg);
    }
    to {
        transform: rotate(-5deg);
    }
}
@keyframes shake {
    from {
        transform: rotate(5deg);
    }
    to {
        transform: rotate(-5deg);
    }
}

HTML

trash icon 简单实用的一个效果。

css3, icon

编辑器支持Emmet

快捷键

trash icon 简单实用的一个效果。

css3, icon

CSS3 ASCII码画的会动的小孩子

15个纯CSS实现的响应式土豪金星球类应用动画图标

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：