Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
css
html, body { height: 100%; } .container { text-align: center; top: 50%; position: relative; margin-top: -141px; } .heart label { box-shadow: 0px 0px 0px 0px rgba(226, 32, 44, 0.5); } .heart label:after { content: "\f004"; } .heart input:checked + label { background-color: #e2202c; border-color: #e2202c; box-shadow: 0px 0px 0px 0.5em rgba(226, 32, 44, 0); } .heart input:checked + label:after { color: #e2202c; } .star label { box-shadow: 0px 0px 0px 0px rgba(253, 192, 47, 0.5); } .star label:after { content: "\f005"; } .star input:checked + label { background-color: #fdc02f; border-color: #fdc02f; box-shadow: 0px 0px 0px 0.5em rgba(253, 192, 47, 0); } .star input:checked + label:after { color: #fdc02f; } .bookmark label { box-shadow: 0px 0px 0px 0px rgba(13, 165, 142, 0.5); } .bookmark label:after { content: "\f02e"; } .bookmark input:checked + label { background-color: #0da58e; border-color: #0da58e; box-shadow: 0px 0px 0px 0.5em rgba(13, 165, 142, 0); } .bookmark input:checked + label:after { color: #0da58e; } .anim-icon { width: 1.9em; height: 1.9em; margin: 20px; font-size: 13px; display: inline-block; position: relative; vertical-align: middle; } .anim-icon input { display: none; } .anim-icon label { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0.1em solid #ccc; border-radius: 100%; display: block; font: normal normal normal 13px/1 FontAwesome; color: #ccc; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; } .anim-icon label:after { left: 0; top: 50%; margin-top: -0.5em; display: block; position: relative; text-align: center; } .anim-icon input:checked + label { -webkit-animation: check-in 0.3s forwards; animation: check-in 0.3s forwards; -webkit-transition: background-color 0.1s 0.2s, box-shadow 1s; transition: background-color 0.1s 0.2s, box-shadow 1s; border-width: 0.1em; border-style: solid; } .anim-icon input:checked + label:after { -webkit-animation: icon .3s forwards; animation: icon .3s forwards; } .anim-icon-md { font-size: 20px; } .anim-icon-lg { font-size: 30px; } @-webkit-keyframes icon { 0% { margin-top: -0.5em; font-size: 1.5em; } 100% { font-size: 1em; opacity: 1; color: white; } } @keyframes icon { 0% { margin-top: -0.5em; font-size: 1.5em; } 100% { font-size: 1em; opacity: 1; color: white; } } @-webkit-keyframes check-in { 0% { left: 20%; top: 20%; width: 60%; height: 60%; } 80% { left: -5%; top: -5%; width: 110%; height: 110%; } 100% { left: 0; top: 0; width: 100%; height: 100%; } } @keyframes check-in { 0% { left: 20%; top: 20%; width: 60%; height: 60%; } 80% { left: -5%; top: -5%; width: 110%; height: 110%; } 100% { left: 0; top: 0; width: 100%; height: 100%; } } @-webkit-keyframes check { 0% { left: 5%; top: 5%; width: 90%; height: 90%; } 10% { left: 0; top: 0; width: 100%; height: 100%; } 80% { left: -5%; top: -5%; width: 110%; height: 110%; } 90% { left: 5%; top: 5%; width: 90%; height: 90%; } 100% { left: 0; top: 0; width: 100%; height: 100%; } } @keyframes check { 0% { left: 5%; top: 5%; width: 90%; height: 90%; } 10% { left: 0; top: 0; width: 100%; height: 100%; } 80% { left: -5%; top: -5%; width: 110%; height: 110%; } 90% { left: 5%; top: 5%; width: 90%; height: 90%; } 100% { left: 0; top: 0; width: 100%; height: 100%; } }
JavaScript
function demo() { /*** Add your demo script here... In this demo, click my button after 1000 milliseconds You have approx three seconds to show off your stuff. ***/ demointerval = setInterval(function() { var chkbox = document.querySelector('input[type="checkbox"]:not([checked])'); if (chkbox) { chkbox.click(); chkbox.setAttribute('checked', 'checked'); } else { clearInterval(demointerval); } }, 600); } // Run demo if in searchresult preview frame if (document.location.pathname.indexOf('fullcpgrid') > -1) { demo(); }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS扩展按钮-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号