placeholdem实现输入框文本占位符点击消失动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：placeholdem实现输入框文本占位符点击消失动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>

<html>

<head>

    <meta charset="utf-8" />
    <style>
        abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;padding:0;border:0;font-size:100%;vertical-align:baseline;background:0 0}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted #000;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}body{color:#333;font:400 120% / 1.5 "Open Sans",sans-serif;-webkit-transition:font-size 300ms;transition:font-size 300ms}.container{margin:0 auto;max-width:40em;padding:3em}header{float:left;width:60%}::-moz-selection{background:#333!important;color:#fff!important;text-shadow:none!important}::selection{background:#333!important;color:#fff!important;text-shadow:none!important}.fade{opacity:0;position:relative;top:-10px;-webkit-transition:opacity 600ms,top 600ms;transition:opacity 600ms,top 600ms}.fade-load{opacity:1;top:0}@media (max-width:50em){body{font-size:100%}header{float:none;width:auto}}@media (max-width:30em){body{font-size:90%}.container{padding:1.5em}}h1{font-size:3em;font-weight:600;letter-spacing:-.05em;line-height:1;margin-bottom:.1em}h2{color:#333;font-size:1.3em;font-weight:400;line-height:1;margin-bottom:1.125em}h3{clear:both;font-size:1.3em;font-weight:400;line-height:1;margin-bottom:.75em}p{font-size:.9em;margin-bottom:1.875em}a{border-bottom:1px solid #ddd;color:#333;text-decoration:none;-webkit-transition:color 300ms;transition:color 300ms}a:focus,a:hover{color:#999}form{margin-bottom:2.25em}label{display:block;position:relative}input,textarea{border:2px solid #ddd;border-radius:0;color:#999;display:block;font:400 1em/1 "Open Sans",sans-serif;margin:0 0 .5em;padding:1em 1.25em;width:100%;-webkit-transition:border-color 300ms,color 300ms;transition:border-color 300ms,color 300ms;-webkit-appearance:none}input:focus,textarea:focus{border-color:#333;color:#333;outline:0}textarea{margin:0;min-height:7.5em;line-height:1.5;overflow:auto;resize:vertical}.arrow{border-top:9px solid #ddd;border-right:9px solid #ddd;border-bottom:9px inset transparent;border-left:9px inset transparent;display:block;position:absolute;right:0;top:0;-webkit-transition:border-color 300ms;transition:border-color 300ms}input:focus+.arrow,textarea:focus+.arrow{border-top-color:#333;border-right-color:#333}@media (max-width:30em){input,textarea{font-size:1.3em}}.buttons{margin-bottom:2.25em}.button{background:#333;color:#fff;display:block;float:left;font-size:1em;font-weight:600;padding:1.5em 1.125em;text-align:center;-webkit-transition:background 300ms;transition:background 300ms;width:49%}.button:last-child{float:right}.button:focus,.button:hover{backgrou.........完整代码请登录后点击上方下载按钮下载查看