Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Do a very important task
Another important task
Not so important task
css
body { padding-top: 100px; } .todo-list { background: #FFF; font-size: 20px; max-width: 15em; margin: auto; padding: 0.5em 1em; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); } .todo { display: block; position: relative; padding: 1em 1em 1em 16%; margin: 0 auto; cursor: pointer; border-bottom: solid 1px #ddd; } .todo:last-child { border-bottom: none; } .todo__state { position: absolute; top: 0; left: 0; opacity: 0; } .todo__text { color: #135156; -webkit-transition: all 0.4s linear 0.4s; transition: all 0.4s linear 0.4s; } .todo__icon { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: auto; margin: auto; fill: none; stroke: #27FDC7; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .todo__line, .todo__box, .todo__check { -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1); transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1); } .todo__circle { stroke: #27FDC7; stroke-dasharray: 1 6; stroke-width: 0; -webkit-transform-origin: 13.5px 12.5px; transform-origin: 13.5px 12.5px; -webkit-transform: scale(0.4) rotate(0deg); transform: scale(0.4) rotate(0deg); -webkit-animation: none 0.8s linear; animation: none 0.8s linear; } @-webkit-keyframes explode { 30% { stroke-width: 3; stroke-opacity: 1; -webkit-transform: scale(0.8) rotate(40deg); transform: scale(0.8) rotate(40deg); } 100% { stroke-width: 0; stroke-opacity: 0; -webkit-transform: scale(1.1) rotate(60deg); transform: scale(1.1) rotate(60deg); } } @keyframes explode { 30% { stroke-width: 3; stroke-opacity: 1; -webkit-transform: scale(0.8) rotate(40deg); transform: scale(0.8) rotate(40deg); } 100% { stroke-width: 0; stroke-opacity: 0; -webkit-transform: scale(1.1) rotate(60deg); transform: scale(1.1) rotate(60deg); } } .todo__box { stroke-dasharray: 56.1053, 56.1053; stroke-dashoffset: 0; -webkit-transition-delay: 0.16s; transition-delay: 0.16s; } .todo__check { stroke: #27FDC7; stroke-dasharray: 9.8995, 9.8995; stroke-dashoffset: 9.8995; -webkit-transition-duration: 0.32s; transition-duration: 0.32s; } .todo__line { stroke-dasharray: 168, 1684; stroke-dashoffset: 168; } .todo__circle { -webkit-animation-delay: 0.56s; animation-delay: 0.56s; -webkit-animation-duration: 0.56s; animation-duration: 0.56s; } .todo__state:checked ~ .todo__text { -webkit-transition-delay: 0s; transition-delay: 0s; color: #5EBEC1; opacity: 0.6; } .todo__state:checked ~ .todo__icon .todo__box { stroke-dashoffset: 56.1053; -webkit-transition-delay: 0s; transition-delay: 0s; } .todo__state:checked ~ .todo__icon .todo__line { stroke-dashoffset: -8; } .todo__state:checked ~ .todo__icon .todo__check { stroke-dashoffset: 0; -webkit-transition-delay: 0.48s; transition-delay: 0.48s; } .todo__state:checked ~ .todo__icon .todo__circle { -webkit-animation-name: explode; animation-name: explode; } html { background: #ddd; } html { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } body { width: 100%; margin: auto; }
JavaScript
console.clear(); setTimeout(function(){ document.querySelector('input[type="checkbox"]').setAttribute('checked',true); },100);
粒子
时间
文字
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号