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;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0