CSS
语言:
CSSSCSS
确定
@import url(https://fonts.googleapis.com/css?family=Space+Mono:400,700);
body {
background: #FFBE0B;
font-family: "Space Mono";
font-weight: 400;
font-size: 0.8em;
color: #aaa;
}
input {
font-family: "Space Mono";
font-size: 1em;
outline: none;
}
* {
margin: 0;
padding: 0;
}
.container {
width: 600px;
margin: 100px auto;
box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.2);
border-radius: 6px;
}
@keyframes shake {
from {
left: -2px;
}
to {
left: 2px;
}
}
.task--row {
height: 50px;
padding: 0 20px;
line-height: 50px;
}
.task__head {
background: #FE5F55;
color: white;
font-weight: bold;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
}
.task__footer {
transition: all 0.2s cubic-bezier(.7, .2, .17, 1);
background: #1CCAD8;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
}
.task__footer:hover {
background-color: #54E0EA
}
.task {
overflow: hidden;
transition: all 0.2s 0.2s cubic-bezier(.7, .2, .17, 1);
position: relative;
display: block;
}
.task__check {
position: absolute;
left: -9999px;
z-index: -1;
}
.task__field {
transition: background-size 0.8s 0.2s cubic-bezier(.7, .2, .17, 1), background-color 0.2s cubic-bezier(.7, .2, .17, 1), height 0.2s 1s cubic-bezier(.7, .2, .17, 1);
position: relative;
background-color: #f8f8f8;
border-top: 1px solid #eee;
background-image: linear-gradient(to right, #FE5F55, red);
background-size: 0 2px;
background-repeat: no-repeat;
background-position: left bottom;
}
.task__field:hover {
background-color: white;
}
.task:first-child .task__field {
border-top: none;
}
.task__field.shaking {
animation: shake 0.1s 0.1s infinite ease-in-out;
background-size: 100% 2px;
}
.task__check:checked + .task__field {
color: #47D185;
}
.task__important {
transition: all 0.3s cubic-bezier(.09, .66, .36, 1.8);
opacity: 0;
position: absolute;
right: 0;
top: 0;
transform: scale(0);
color: #47D185;
font-size: 1.4em;
height: 50px;
width: 50px;
border: 0;
background: none;
}
.task__check:checked + .task__field > .task__important {
opacity: 0.5;
transform: scale(1);
}
.task__field.delete {
transition: all 0.2s cubic-bezier(.7, .2, .17, 1);
transform: scale(1.5, 2);
height: 0;
opacity: 0;
}
.task__add {
height: 50px;
border: 0;
background: none;
width: 100%;
color: white;
}