css实现一个待办事项勾选动画效果代码
代码语言:html
所属分类:表单美化
代码描述:css实现一个待办事项勾选动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html> <head> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:500,700); *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; } body { margin: 20px; color: #435757; background: linear-gradient(-20deg, #d0b782 20%, #a0cecf 80%); font: 500 1.2em/1.2 'Roboto', sans-serif; } .container { max-width: 450px; margin: 0 auto; border-top: 5px solid #435757; background-color: rgba(255, 255, 255, .2); box-shadow: 0 0 20px rgba(0, 0, 0, .1); user-select: none; } h1 { margin: 0; padding: 20px; background-color: rgba(255, 255, 255, .4); font-size: 1.8em; text-align: center; } .items { display: flex; flex-direction: column; padding: 20px; counter-reset: done-items undone-items; } h2 { position: relative; margin: 0; padding: 10px 0; font-size: 1.2em; } h2::before { content: ''; display: block; position: absolute; top: 10px; bottom: 10px; left: -20px; width: 5px; background-color: #435757; } h2::after { display: block; float: right; font-weight: normal; } .done { order: 1; } .done::after { content: ' (' counter(done-items) ')'; } .undone { order: 3; } .undone::after { content: ' (' counter(undone-items) ')'; } /* hide inputs offscreen, but at the same vertical positions as the correpsonding labels, so that tabbing scrolls the viewport as expected */ input { display: block; height: 53px; margin: 0 0 -53px -9999px; order: 4; outline: none; counter-increment: undone-items; } input:checked { order: 2; counter-increment: done-items; } label { display: block; position: relative; padding: 15px 0 15px 45px; border-top: 1px dashed #fff; order: 4; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0