jQuery-UI+CSS3 可拖拉式图标

Drag Icon。左边的九星图标使用内容为"."的伪元素的text-shadow方法构造。

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    font-family: sans-serif;
    font-weight: 300;
    font-size: 16px;
    line-height: 16px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    margin: 0;
    background: #f7dafb;
}
.drag-me {
    background: #d94fed;
    width: 180px;
    padding-left: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -90px;
    margin-top: -20px;
    cursor: move;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    -moz-transition: box-shadow 0.2s;
    -o-transition: box-shadow 0.2s;
    -webkit-transition: box-shadow 0.2s;
    transition: box-shadow 0.2s;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.drag-me:hover {
    -moz-box-shadow: #830f94 0 1px 3px;
    -webkit-box-shadow: #830f94 0 1px 3px;
    box-shadow: #830f94 0 1px 3px;
}
.drag-me:active {
    cursor: move;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
}
.drag-me:before {
    content: '.';
    position: absolute;
    left: 14px;
    font-size: 20px;
    line-height: 20px;
    color: #ac14c2;
    text-shadow: 0 5px #ac14c2, 0 10px #ac14c2, 5px 0 #ac14c2, 5px 5px #ac14c2, 5px 10px #ac14c2, 10px 0 #ac14c2, 10px 5px #ac14c2, 10px 10px #ac14c2;
}
.drag-me span {
    color: #5a0a66;
    line-height: 42px;
}

HTML

Drag Icon。左边的九星图标使用内容为"."的伪元素的text-shadow方法构造。

编辑器支持Emmet

快捷键

Drag Icon。左边的九星图标使用内容为"."的伪元素的text-shadow方法构造。

jQuery可拖拉可调整大小可编辑内容的DIV

babylon.js + react.js很棒的3d图表代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：