css 单项选择块,css

css

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);

.frame {

position: absolute;

top: 50%;

left: 50%;

width: 400px;

height: 400px;

margin-top: -200px;

margin-left: -200px;

border-radius: 2px;

box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);

overflow: hidden;

background: #FDA231;

color: #333;

font-family: 'Open Sans', Helvetica, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

display: -webkit-box;

display: flex;

-webkit-box-align: center;

align-items: center;

-webkit-box-pack: center;

justify-content: center;

}

.center {

width: 60%;

height: 70%;

background: white;

box-shadow: 5px 5px 20px #00000044;

}

.dateContainer {

padding: 25px 20px;

display: -webkit-box;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

flex-direction: column;

-webkit-box-align: center;

align-items: center;

}

.dateContainer .day {

font-size: 20px;

font-weight: bold;

}

.dateContainer .date {

font-size: 14px;

padding: 5px;

}

.dateContainer:after {

content: '';

background: #aaa;

position: absolute;

height: 1px;

width: 160px;

top: 38%;

}

.task {

padding: 10px 20px;

position: relative;

}

.task input[type=checkbox] {

-webkit-box-flex: 1;

flex: 1;

display: none;

}

.task input[type=checkbox]:checked ~ .task-name {

color: #C8D4D9;

display: inline-block;

-webkit-text-decoration: line-through #C8D4D9;

text-decoration: line-through #C8D4D9;

}

.task input[type=checkbox]:checked ~ .task-btn {

-webkit-transform: scale(1.2);

transform: scale(1.2);

opacity: 0;

}

.task input[type=checkbox]:checked ~ .tick {

opacity: 1;

}

.task .task-name {

-webkit-transition: all 0.3s ease;

transition: all 0.3s ease;

font-size: 14px;

}

.task .task-btn {

width: 15px;

height: 15px;

border: 1px solid black;

border-radius: 100%;

position: absolute;

right: 10%;

-webkit-transition: all 0.3s ease;

transition: all 0.3s ease;

}

.task .task-btn:hover {

cursor: pointer;

}

.task .tick {

width: 5px;

height: 13px;

border: solid #C8D4D9;

border-width: 0 2px 2px 0;

-webkit-transform: rotate(45deg);

transform: rotate(45deg);

position: absolute;

right: 12%;

opacity: 0;

-webkit-transition: all 0.4s ease;

transition: all 0.4s ease;

}