css单选效果

下载代码

html

css

分享到微信朋友圈

html

<div class="frame">
    <div class="center">
        <div class="dateContainer">
            <div class="day">Monday</div>
            <div class="date">December 3, 2018</div>
        </div>

<div class="taskContainer">
            <div class="task">
                <input type="checkbox" id="task-one" />
                <label for="task-one" class="task-name">Open CodePen</label>
                <label for="task-one" class="task-btn"></label>
                <label for="task-one" class="tick"></label>
            </div>

<div class="task">
                <input type="checkbox" id="task-two" />
                <label for="task-two" class="task-name">Write some code</label>
                <label for="task-two" class="task-btn"></label>
                <label for="task-two" class="tick"></label>
            </div>

<div class="task">
                <input type="checkbox" id="task-three" />
                <label for="task-three" class="task-name">Repeat 100x</label>
                <label for="task-three" class="task-btn"></label>
                <label for="task-three" class="tick"></label>
            </div>
        </div>

<div class="task">
            <input type="checkbox" id="task-four" />
            <label for="task-four" class="task-name">Get Better</label>
            <label for="task-four" class="task-btn"></label>
            <label for="task-four" class="tick"></label>
        </div>
    </div>
</div>

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;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg