河北住房和城乡建设厅网站电话是多少,公司大全免费查询,购买网站域名多少钱,wordpress 文章摘要欢迎来到前端设计专栏#xff0c;本专栏收藏了一些好看且实用的前端作品#xff0c;使用简单的html、css语法打造创意有趣的作品#xff0c;为网站加入更多高级创意的元素。 html !DOCTYPE html
html langen
headmeta charset本专栏收藏了一些好看且实用的前端作品使用简单的html、css语法打造创意有趣的作品为网站加入更多高级创意的元素。 html !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet href./card1.css/head
body
div classwave-groupinput required typetext classinputspan classbar/spanlabel classlabelspan classlabel-char style--index: 0N/spanspan classlabel-char style--index: 1a/spanspan classlabel-char style--index: 2m/spanspan classlabel-char style--index: 3e/span/label
/div
/body
/html css
.wave-group {position: relative;
}.wave-group .input {font-size: 16px;padding: 10px 10px 10px 5px;display: block;width: 200px;border: none;border-bottom: 1px solid #515151;background: transparent;
}.wave-group .input:focus {outline: none;
}.wave-group .label {color: #999;font-size: 18px;font-weight: normal;position: absolute;pointer-events: none;left: 5px;top: 10px;display: flex;
}.wave-group .label-char {transition: 0.2s ease all;transition-delay: calc(var(--index) * .05s);
}.wave-group .input:focus ~ label .label-char,
.wave-group .input:valid ~ label .label-char {transform: translateY(-20px);font-size: 14px;color: #5264AE;
}.wave-group .bar {position: relative;display: block;width: 200px;
}.wave-group .bar:before,.wave-group .bar:after {content: ;height: 2px;width: 0;bottom: 1px;position: absolute;background: #5264AE;transition: 0.2s ease all;-moz-transition: 0.2s ease all;-webkit-transition: 0.2s ease all;
}.wave-group .bar:before {left: 50%;
}.wave-group .bar:after {right: 50%;
}.wave-group .input:focus ~ .bar:before,
.wave-group .input:focus ~ .bar:after {width: 50%;
}
