更多有趣示例 尽在 知屋安砖社区
示例
CSS
@import url('https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap');
* {
box-sizing: border-box;
outline: 0;
}
:root {
--font: 'DM Sans', sans-serif;
}
body {
background-image: linear-gradient( 102.7deg, rgba(253,218,255,1) 8.2%, rgba(223,173,252,1) 19.6%, rgba(173,205,252,1) 36.8%, rgba(173,252,244,1) 73.2%, rgba(202,248,208,1) 90.9% );
background-attachment: fixed;
display: flex;
flex-direction: column;
background-repeat: no-repeat;
background-size: cover;
padding: 20px;
height: 100vh;
overflow: hidden;
}
.app {
max-width: 400px;
width: 100%;
margin: auto;
background-color: #fff;
font-family: var(--font);
border-radius: 16px;
font-size: 15px;
overflow: hidden;
color: #455963;
box-shadow: 0 20px 80px rgba(0,0,0,.3);
}
.task-list {
max-height: 60vh;
overflow: auto;
}
.task-status {
appearance: none;
width: 18px;
height: 18px;
cursor: pointer;
border: 2px solid #bbbdc7;
border-radius: 50%;
background-color: #fff;
margin-right: 10px;
position: relative;
}
.task-status:checked {
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='405.272' height='405.272'%3e%3cpath d='M393.401 124.425L179.603 338.208c-15.832 15.835-41.514 15.835-57.361 0L11.878 227.836c-15.838-15.835-15.838-41.52 0-57.358 15.841-15.841 41.521-15.841 57.355-.006l81.698 81.699L336.037 67.064c15.841-15.841 41.523-15.829 57.358 0 15.835 15.838 15.835 41.514.006 57.361z' fill='%23fff'/%3e%3c/svg%3e");
background-size: 10px;
background-color: #4acea3;
border-color: #38bb90;
background-repeat: no-repeat;
background-position: center;
}
.task-delete {
margin-left: 10px;
}
.task-item {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 12px 20px;
}
.task-item + .task-item {
border-top: 1px solid #eef0f5;
}
.task-item:hover {
background-color: #f6fbff;
}
.task-name {
margin-right: auto;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.task-item.is-completed > .task-name {
text-decoration: line-through wavy rgba(0,0,0,.3);
}
.task-item.is-completed {
background-color: rgba(74, 206, 163, 0.1);
}
.task-header-title {
margin: 0;
font-size: 20px;
font-weight: 600;
padding: 20px 20px 6px 20px;
}
.task-tools {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: flex-start;
padding: 0 20px;
}
.task-filter {
border: 0;
padding: 3px 8px;
background: 0;
font-size: 14px;
line-height: 1;
cursor: pointer;
font-family: var(--font);
color: #8a9ca5;
border-radius: 20px;
}
.task-filter.is-active {
background-color: #7996a5;
color: #fff;
}
.task-count {
color: #8a9ca5;
font-size: 14px;
}
.task-form {
display: flex;
margin-top: 10px;
}
.task-input {
flex: 1;
font-size: 16px;
font-family: var(--font);
padding: 10px 20px;
border: 0;
box-shadow: 0 -1px 0 #e2e4ea inset;
color: #455963;
}
.task-input::placeholder {
color: #a8b5bb;
}
.task-input:focus {
box-shadow: 0 -1px 0 #bdcdd6 inset;
}
.task-button {
display: none; }
.task-delete {
border: 0;
width: 18px;
height: 18px;
padding: 0