html评论输入框引入,HTML5带变形动画的评论输入框控件

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,500");

@import url("https://fonts.googleapis.com/css?family=Inconsolata");

* {

margin: 0;

padding: 0;

}

body {

background: #E8E8E8;

font-family: 'Raleway', sans-serif;

}

.cbox,

.container {

display: flex;

align-items: center;

justify-content: center;

}

.container {

flex-direction: column;

height: 100vh;

}

.parent {

width: 200px;

height: 50px;

position: relative;

}

.parent .add,

.parent .cbox,

.parent .message {

position: absolute;

}

.parent .add,

.parent .message {

color: #F25C54;

}

.parent .add {

top: -3px;

right: 25px;

transition: 0.6s all 0.3s;

letter-spacing: 1px;

}

.message,

.cbox {

outline: none;

}

.cbox {

top: -10px;

right: -10px;

width: 30px;

height: 30px;

background: #F25C54;

border-radius: 100%;

-webkit-appearance: none;

z-index: 3;

}

.cbox:before,

.cbox:after {

position: absolute;

content: '';

width: 20px;

height: 2px;

background: #E8E8E8;

transition: 0.4s all;

}

.cbox:after {

transform: rotate(90deg);

}

.cbox:checked ~ .message {

width: 300px;

height: 50px;

transition: 0.3s width, 0.3s height 0.2s;

}

.cbox:checked:before,

.cbox:checked:after {

transform: rotate(360deg);

transition: 0.4s all;

}

.cbox:checked ~ .add {

font-size: 13px;

transform: translateY(-16px);

transition: 0.3s all;

}

.message {

right: 0;

height: 0;

width: 0;

transition: 0.4s all;

background: none;

border: 2px solid #F25C54;

transition: 0.4s width 0.2s, 0.1s height;

font-size: 30px;

padding-left: 10px;

}

footer {

position: absolute;

bottom: 0;

right: 0;

font-size: 12px;

padding: 10px;

color: #333;

letter-spacing: 1px;

font-family: 'Inconsolata', monospace;

}

footer a {

color: #F25C54;

}