Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
* { box-sizing: border-box; } body { width: 100%; height: 100%; margin: 4%; overflow: hidden; background: #a3fcff; } .container { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 92%; height: 115px; max-width: 510px; padding: 0 24px; background: #41484b; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.25) 0 16px 36px; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .container > button { position: relative; display: block; width: 25%; height: 100%; border: none; background: transparent; cursor: pointer; z-index: 99; outline: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-user-select: none; -webkit-touch-callout: none; } .container > button > div { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } .cut:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 2px; height: 2px; background: #41484b; z-index: 2; border-radius: 100%; } .cut.is-active .top { -webkit-animation: cut-top 0.8s ease-out; animation: cut-top 0.8s ease-out; } .cut.is-active .bottom { -webkit-animation: cut-bottom 0.8s ease-out; animation: cut-bottom 0.8s ease-out; } .cut .top, .cut .bottom { display: block; width: 42px; height: 6px; background: white; } .cut .top:before, .cut .bottom:before { content: ""; position: absolute; top: -5px; left: -5px; width: 8px; height: 8px; background: #41484b; border: 4px solid white; border-radius: 100%; } .cut .top:after, .cut .bottom:after { content: ""; position: absolute; top: 0; right: -4px; width: 8px; height: 6px; background: white; border-radius: 1px; } .cut .top { -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0); box-shadow: #41484b 0 -2px 0 1px; z-index: 1; } .cut .top:after { -webkit-transform: skewX(-45deg); transform: skewX(-45deg); } .cut .bottom { -webkit-transform: rotate(-45deg) translateZ(0); transform: rotate(-45deg) translateZ(0); } .cut .bottom:after { -webkit-transform: skewX(45deg); transform: skewX(45deg); } .copy.is-active .bottom { -webkit-animation: copy 0.8s ease-out; animation: copy 0.8s ease-out; } .copy .top, .copy .bottom { background: #41484b; top: -10px; left: -12px; } .copy .top { width: 29px; height: 34px; border-top: 4px solid white; border-left: 4px solid white; border-radius: 4px 0; } .copy .bottom { width: 32px; height: 38px; border: 4px solid white; border-radius: 4px; -webkit-transform: translate(9px, 10px); transform: translate(9px, 10px); } .delete.is-active .top { -webkit-animation: delete 0.8s ease-out; animation: delete 0.8s ease-out; } .delete .top { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; top: -31px; width: 30px; height: 4px; background: white; z-index: 1; } .delete .top:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; top: -2px; width: 18px; height: 6px; background: white; border-radius: 8px; } .delete .bottom { top: 8px; width: 26px; height: 30px; background: white; border-radius: 0 0 6px 6px; } .share.is-active .line:nth-child(2):before { -webkit-animation: share-top 0.8s linear; animation: share-top 0.8s linear; } .share.is-active .line:nth-child(3):before { -webkit-animation: share-bottom 0.8s linear; animation: share-bottom 0.8s linear; } .share .circles { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; right: 26px; width: 12px; height: 12px; background: white; border-radius: 100%; } .share .circles:before, .share .circles:after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 12px; height: 12px; background: white; border-radius: 100%; } .share .circles:before { top: -28px; left: 26px; } .share .circles:after { bottom: -28px; left: 26px; } .share .line { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 36px; height: 3px; background: transparent; overflow: hidden; } .share .line:nth-child(2) { bottom: 14px; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .share .line:nth-child(3) { top: 15px; -webkit-transform: rotate(30deg); transform: rotate(30deg); } .share .line:before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100%; height: 100%; background: white; -webkit-transform-origin: 50%; transform-origin: 50%; } @-webkit-keyframes cut-top { 0% { -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0); } 20% { -webkit-transform: rotate(25deg) translateZ(0); transform: rotate(25deg) translateZ(0); } 40% { -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0); } 60% { -webkit-transform: rotate(25deg) translateZ(0); transform: rotate(25deg) translateZ(0); } 100% { -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0); } } @keyframes cut-top { 0% { -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0); } 20% { -webkit-transform: rotate(25deg) translateZ(0); transform: rotate(25deg) translateZ(0); } 40% { -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0); } 60% { -webkit-transform: rotate(25deg) translateZ(0); transform: rotate(25deg) translateZ(0); } 100% { -webkit-transform: rotate(45deg) translateZ(0); transform: rotate(45deg) translateZ(0); } } @-webkit-keyframes cut-bottom { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 20% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 40% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 100% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } @keyframes cut-bottom { 0% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 20% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 40% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } 100% { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } } @-webkit-keyframes copy { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(9px, 10px); transform: translate(9px, 10px); } } @keyframes copy { 0% { -webkit-transform: translate(0, 0); transform: translate(0, 0); } 100% { -webkit-transform: translate(9px, 10px); transform: translate(9px, 10px); } } @-webkit-keyframes delete { 0% { -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); } 20% { -webkit-transform: rotate(0) translateY(-4px); transform: rotate(0) translateY(-4px); } 30% { -webkit-transform: rotate(20deg) translateY(-4px); transform: rotate(20deg) translateY(-4px); } 40% { -webkit-transform: rotate(-20deg) translateY(-4px); transform: rotate(-20deg) translateY(-4px); } 50% { -webkit-transform: rotate(20deg) translateY(-4px); transform: rotate(20deg) translateY(-4px); } 60% { -webkit-transform: rotate(-10deg) translateY(-4px); transform: rotate(-10deg) translateY(-4px); } 70% { -webkit-transform: rotate(10deg) translateY(-4px); transform: rotate(10deg) translateY(-4px); } 80% { -webkit-transform: rotate(0) translateY(-4px); transform: rotate(0) translateY(-4px); } 100% { -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); } } @keyframes delete { 0% { -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); } 20% { -webkit-transform: rotate(0) translateY(-4px); transform: rotate(0) translateY(-4px); } 30% { -webkit-transform: rotate(20deg) translateY(-4px); transform: rotate(20deg) translateY(-4px); } 40% { -webkit-transform: rotate(-20deg) translateY(-4px); transform: rotate(-20deg) translateY(-4px); } 50% { -webkit-transform: rotate(20deg) translateY(-4px); transform: rotate(20deg) translateY(-4px); } 60% { -webkit-transform: rotate(-10deg) translateY(-4px); transform: rotate(-10deg) translateY(-4px); } 70% { -webkit-transform: rotate(10deg) translateY(-4px); transform: rotate(10deg) translateY(-4px); } 80% { -webkit-transform: rotate(0) translateY(-4px); transform: rotate(0) translateY(-4px); } 100% { -webkit-transform: rotate(0) translateY(0); transform: rotate(0) translateY(0); } } @-webkit-keyframes share-top { 0% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 40%, 41% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } 41% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 80%, 100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } } @keyframes share-top { 0% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 40%, 41% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } 41% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 80%, 100% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } } @-webkit-keyframes share-bottom { 0%, 10% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } 50%, 51% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 51% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } 90%, 100% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } } @keyframes share-bottom { 0%, 10% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } 50%, 51% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } 51% { -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); } 90%, 100% { -webkit-transform: translate(100%, 0); transform: translate(100%, 0); } }
JavaScript
/* Inspiration came from the Dribble shot "Cut Copy Share Delete" by Srikant Shetty https://dribbble.com/shots/2428762-Cut-Copy-Share-Delete */ $('button').on('click',function(){ $(this) .addClass("is-active") .delay(800) .queue(function(){ $(this).removeClass("is-active").dequeue(); }); });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>删除复制共享删除-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号