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

点击添加评论的按钮，加号变形扩展为输入框，并在输入框的右上角显示为减号。

html5, input, control

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3640
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

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

HTML

点击添加评论的按钮，加号变形扩展为输入框，并在输入框的右上角显示为减号。

html5, input, control

编辑器支持Emmet

快捷键

点击添加评论的按钮，加号变形扩展为输入框，并在输入框的右上角显示为减号。

html5, input, control

HTML5 CSS3带上传列表和进度动画的多文件上传控件

12个HTML5有趣的弹性变形动画信息提示框

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：