项目的github地址为: github.com/sunshine940…
本文首发于个人我的博客,cherryblog.site/ ;欢迎你们查看个人其余博客
最近在作公司后台的优化项目,拿到设计稿一看,设计师以为默认的input、checkbox、radio太丑了,要优化,在作了几个demo以后找到了要怎么优化这些样式的方法,我优化的原则有如下几点:javascript
大体的原理都是使用html原生的标签元素标签checkbox
或者input
,在后面加上label
标签,将一些原有的元素隐藏,而后再用css设置你想要样式,行为方面都是根据原生属性来判断,不须要使用js。全部的html代码都是css
div.container
input type="checkbox" id="checkbox"
label for="checkbox"
div.bottom-line复制代码
都是利用css的原生属性来判断用户的操做,先将本来的checkbox隐藏,而后再设置label的样式,最后设置input[type=checkbox]:checked+label
的样式 html
首先来看一个checkbox,实现这个动画其实很简单,只运用css就能够实现。实现的原理是绑定checkout和label,用label控制是否checked。点击label的时候改变checkbox的属性
先将checkbox隐藏,而后label为一个只有border的框框,使用after和befor伪元素来实现对号的两部分。
先将after和before设置宽度为width0.4,height为0,设置不一样的旋转角度,让befor和after合起来恰好是一个对号。
而后用css动画设置使其height达到width0.7和width*0.35并控制动画使其连贯播放,java
<div class="cb-container">
<input type="checkbox" id="checkbox"> <label for="checkbox" class="cb-label"></label> </div>复制代码
$checked-color: #fff;
$checked-bg:rgb(101,141,181);
$unchecked-color: #cfcece;
$unchecked-bg:rgb(249,249,249);
$checkbox-height: 100px;
$background-color:#fff;
$font-color:#dcdcdc;
$duration: .4s;
.cb-container{
width: 1000px;
text-align: center;
margin-top: 50px;
}
html, body{
padding:0;
margin:0;
background-color: $background-color;
color:$font-color;
font-family:'Open Sans';
}
#checkbox{
display:none;
}
.cb-label{
height: $checkbox-height;
width: $checkbox-height;
background: $unchecked-bg;
border: $checkbox-height * .1 solid $unchecked-color;
position: relative;
display: inline-block;
box-sizing: border-box;
transition: border-color ease $duration/2;
-moz-transition: border-color ease $duration/2;
-o-transition: border-color ease $duration/2;
-webkit-transition: border-color ease $duration/2;
cursor: pointer;
&::before,&::after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
position: absolute;
height: 0;
width: $checkbox-height * 0.2;
background: $checked-color;
display: inline-block;
-moz-transform-origin: left top;
-ms-transform-origin: left top;
-o-transform-origin: left top;
-webkit-transform-origin: left top;
transform-origin: left top;
content: '';
-webkit-transition: opacity ease 0.5s;
-moz-transition: opacity ease 0.5s;
transition: opacity ease 0.5s;
}
&::before{
top:$checkbox-height * 0.76;
left: $checkbox-height * 0.31;
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
&::after {
top: $checkbox-height * .45;
left: $checkbox-height * 0;
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
}
input[type=checkbox]:checked + .cb-label,
.cb-label.checked{
background: $checked-bg;
border-color:$checked-bg;
&::after{
border-color:$checked-color;
height: $checkbox-height * .35;
-moz-animation: dothabottomcheck $duration/2 ease 0s forwards;
-o-animation: dothabottomcheck $duration/2 ease 0s forwards;
-webkit-animation: dothabottomcheck $duration/2 ease 0s forwards;
animation: dothabottomcheck $duration/2 ease 0s forwards;
}
&::before{
border-color:$checked-color;
height: $checkbox-height * 1;
-moz-animation: dothatopcheck $duration ease 0s forwards;
-o-animation: dothatopcheck $duration ease 0s forwards;
-webkit-animation: dothatopcheck $duration ease 0s forwards;
animation: dothatopcheck $duration ease 0s forwards;
}
}
@-moz-keyframes dothabottomcheck{
0% { height: 0; }
100% { height: $checkbox-height *0.35; }
}
@-webkit-keyframes dothabottomcheck{
0% { height: 0; }
100% { height: $checkbox-height *0.35; }
}
@keyframes dothabottomcheck{
0% { height: 0; }
100% { height: $checkbox-height *0.35; }
}
@keyframes dothatopcheck{
0% { height: 0; }
50% { height: 0; }
100% { height: $checkbox-height * 0.7; }
}
@-webkit-keyframes dothatopcheck{
0% { height: 0; }
50% { height: 0; }
100% { height: $checkbox-height * 0.7; }
}
@-moz-keyframes dothatopcheck{
0% { height: 0; }
50% { height: 0; }
100% { height: $checkbox-height * 0.7; }
}复制代码
input的优化源于在掘金上看到的一篇文章,效果着实小清新,因而就使用拿来主义,写了一个简易版的demo,效果以下,运用的是flex布局还有伪元素placeholder来实现的。
css3
placeholder
,而是使用的label,可是也设置有placeholder
,只不过是把placeholder
的透明度设置为0,由于咱们须要根据placeholder
是否显示来设置下方line的宽度和label的位置。div.input-container
input type="input" id="input" placeholder="请输入内容"
label for="input"
div.bottom-line复制代码
完整html代码以下git
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="scss/main.css">
</head>
<body>
<div class="input-container">
<input type="input" id="input" placeholder="请输入内容">
<label for="input">请输入内容</label>
<div class="bottom-line"></div>
</div>
</body>
</html>复制代码
所有的动画效果都只使用了css,可是使用的一些新特性浏览器兼容性尚未那么好,兼容到ie10.布局使用的是flex,动画效果用的是用的transform。运用伪类placeholder判断是否输入了文字,若是输入了文字下方的line宽度变为100%;label中的文字上移而且变小
代码以下:github
$width: 500px;
$label-font-color: #3f4f5b;
$label-focus-font-color: rgb(82, 97, 108);
$border-bottom-color: #d5d5d5;
$focus-border-color: rgb(101, 141, 181);
$transform-top: 10px;
$transform-time: 0.3s;
$scale: 0.9;
.input-container {
width: $width;
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-flow: column-reverse;
flex-flow: column-reverse;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
margin: 100px auto
}
.input-container input {
-webkit-box-ordinal-group: 11;
order: 10;
-ms-flex-order: 10;
outline: none;
border: none;
width: 100%;
padding: 10px 0;
font-size: 20px;
border-bottom: 1px solid $border-bottom-color;
text-indent: 10px;
}
.input-container input::-moz-placeholder {
opacity: 0;
}
.input-container input::-webkit-input-placeholder {
opacity: 0;
}
.input-container input:-ms-input-placeholder {
opacity: 0;
}
.input-container input, .input-container label {
transition: all $transform-time;
}
.input-container label {
-webkit-box-ordinal-group: 101;
-ms-flex-order: 100;
order: 100;
color: $label-font-color;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
-webkit-transform: translate(10px, 40px);
transform: translate(0px, 40px);
}
.input-container .bottom-line {
order: 2;
width: 0;
height: 2px;
background: $focus-border-color;
transition: all $transform-time;
}
.input-container input:focus {
border-bottom-color: #fff;
}
.input-container input:focus ~ div, .input-container input:not(:placeholder-shown) ~ div {
width: 100%
}
.input-container input:focus + label, .input-container input:not(:placeholder-shown) + label {
color: $label-focus-font-color;
-webkit-transform: translate(10px) scale($scale);
transform: translate(10px) scale($scale)
}复制代码