CSS3 实现厉害的文字和输入框组合效果

最近在忙着弄网站，学到了不少效果，这又是一个厉害的

 

 

 

Html代码  收藏代码
  1. <html>  
  2.     <head>  
  3.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
  4.         <title>发送微博页面</title>  
  5.   
  6. <style>  
  7. html{padding:0px;margin:0px;}  
  8. body{padding:0px;margin:0px;text-align:center;}  
  9.   
  10. /** 弹出层背景 **/  
  11. .pop-bg{filter:alpha(opacity=10); -moz-opacity:0.1; -khtml-opacity: 0.1; opacity: 0.1;border-radius: 15px;box-shadow: 0 1px 1px rgba(255, 255, 255, 0.8) inset, 1px 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 4px rgba(188, 188, 188, 0.5);}  
  12. .pop-body{padding:10px;}  
  13. .pop-body-title{float:left;border-radius: 10px;width:100%;border:1px solid #4096ee;}  
  14. .title-text{float:left;color: black; font-size: 22px;padding-left:10px;}  
  15. .title-close{float:right;cursor:pointer;padding-right:15px;padding-top:3px;}  
  16. .title-close a{text-decoration: none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;}  
  17. .title-close a:hover{text-decoration: none;color:red;display: inline-block;background:#c0d3e7;border-radius: 5px;padding-left:5px;padding-right:5px;}  
  18.   
  19. /** 内容部份 **/  
  20. .pop-body-context{  
  21.     border-radius: 10px;width:100%;border:1px solid #4096ee;  
  22.     float:left;  
  23.     margin-top:15px;  
  24. }  
  25.   
  26. .pop-body-c-title{  
  27.     float:left;  
  28.       
  29. }  
  30.   
  31. .a-btn{  
  32.     -moz-border-bottom-colors: none;  
  33.     -moz-border-image: none;  
  34.     -moz-border-left-colors: none;  
  35.     -moz-border-right-colors: none;  
  36.     -moz-border-top-colors: none;  
  37.     -moz-transition: all 0.3s linear 0s;  
  38.     background: -moz-linear-gradient(center top , #FEDA71 0%, #FEBB4A 100%) repeat scroll 0 0 transparent;  
  39.     border-color: #F5B74E #E5A73E #D6982F;  
  40.     border-radius: 4px 4px 4px 4px;  
  41.     border-style: solid;  
  42.     border-width: 1px;  
  43.     box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #FEE395 inset;  
  44.     display: inline-block;  
  45.     float: left;  
  46.     height: 34px;  
  47.     margin: 10px;  
  48.     margin-right: 3px;  
  49.     margin-left: 4px;  
  50.     overflow: hidden;  
  51.     padding: 5px 130px 0 0px;  
  52.     position: relative;  
  53.     text-decoration: none;  
  54. }  
  55. .a-btn-text{  
  56.     padding-top:5px;  
  57.     display:block;  
  58.     font-size:14px;  
  59.     white-space:nowrap;  
  60.     color:#996633;  
  61.     text-shadow:0 1px 0 #fedd9b;  
  62.     -webkit-transition:all 0.3s linear;  
  63.     -moz-transition:all 0.3s linear;  
  64.     -o-transition:all 0.3s linear;  
  65.     transition:all 0.3s linear;  
  66.     font-weight:bold;  
  67. }  
  68. .a-btn-slide-text{  
  69.     position:absolute;  
  70.     top:35px;  
  71.     left:0px;  
  72.     width:auto;  
  73.     height:0px;  
  74.     background:#fff;  
  75.     color:#996633;  
  76.     font-size:13px;  
  77.     white-space:nowrap;  
  78.     font-family:Georgia, serif;  
  79.     font-style:italic;  
  80.       
  81.     overflow:hidden;  
  82.     line-height:40px;  
  83.     -webkit-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
  84.     -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
  85.     box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset;  
  86.     -webkit-transition:height 0.3s linear;  
  87.     -moz-transition:height 0.3s linear;  
  88.     -o-transition:height 0.3s linear;  
  89.     transition:height 0.3s linear;  
  90. }  
  91. .a-btn-icon-right{  
  92.     position:absolute;  
  93.     right:0px;  
  94.     top:0px;  
  95.     height:41px;  
  96.     width:130px;  
  97.     border-left:1px solid #f5b74e;  
  98.     -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
  99.     -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
  100.     box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset;  
  101. }  
  102. .a-btn:hover{  
  103.     height:65px;  
  104.     -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
  105.     -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
  106.     box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4);  
  107. }     
  108. .a-btn:hover .a-btn-text{  
  109.     text-shadow:1px 1px 1px rgba(0,0,0,0.2);  
  110.     color:#fff;  
  111. }  
  112. .a-btn:hover .a-btn-slide-text{  
  113.     height:40px;  
  114. }  
  115. .a-btn-slide-text input{  
  116.     float:left;  
  117.     margin-top:4px;  
  118.     margin-left:2px;  
  119. }  
  120. .pop-body-c-text{  
  121.     padding-left:3px;  
  122. }  
  123. .pop-body-c-textarea{  
  124.     width:780px;  
  125.     height:100px;  
  126. }  
  127. .pop-body-row-u{  
  128.     padding-top:5px;  
  129.     padding-left:10px;  
  130. }  
  131. .a-t-i-r-t{  
  132.     font-size:14px;height:20px;overflow:hidden;padding-top:8px;text-align:center;  
  133. }  
  134.   
  135. .pop-body-images-l{  
  136.     padding:10px;  
  137.       
  138. }  
  139.   
  140. .pop-body-ims-panel{  
  141.     padding:10px;  
  142. }  
  143.   
  144. .pop-b-i-i-img{  
  145.     border-radius:8px;  
  146.     float:left;  
  147.     position:relative;  
  148.     left:-20px;  
  149.       
  150. }  
  151. .pop-b-i-i-unit{  
  152.     float:left;  
  153. }  
  154. .pop-b-i-i-unit input{  
  155.     float:left;  
  156.     position:relative;  
  157.     z-index:99;  
  158. }  
  159. </style>  
  160.     </head>  
  161.   
  162.     <body>  
  163.         <br />  
  164.         <div style="float:left;width:820px;height:200px;position:relative;left:100px;">  
  165.             <div class="pop-bg" style="float:left;position:relative;width:820px;height:200px;"></div>  
  166.             <div class="pop-body" style="float:left;text-align:left;position:relative;top:-200px;width:98%;">  
  167.                 <!-- 头部 -->  
  168.                 <div class="pop-body-title">  
  169.                     <div class="title-text">标题</div>  
  170.                     <div class="title-close"><a href="#">关闭</a></div>  
  171.                 </div>  
  172.   
  173.                 <!-- 内容部分 -->  
  174.                 <div class="pop-body-context">  
  175.                     <div class="pop-body-c-title">  
  176.                         <a class="a-btn" href="#">  
  177.                             <span class="a-btn-text">栏目名称</span>  
  178.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t">请输入</div></span>  
  179.                             <span class="a-btn-slide-text"><input size="24"/></span>  
  180.                         </a>  
  181.   
  182.                         <a class="a-btn" href="#">  
  183.                             <span class="a-btn-text">中文名称</span>  
  184.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
  185.                             <span class="a-btn-slide-text"><input size="24"/></span>  
  186.                         </a>  
  187.   
  188.                         <a class="a-btn" href="#">  
  189.                             <span class="a-btn-text">英文名称</span>  
  190.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
  191.                             <span class="a-btn-slide-text"><input size="24"/></span>  
  192.                         </a>  
  193.   
  194.                         <a class="a-btn" href="#">  
  195.                             <span class="a-btn-text">适配类型</span>  
  196.                             <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入</div></span>  
  197.                             <span class="a-btn-slide-text"><input size="24"/></span>  
  198.                         </a>  
  199.                     </div>  
  200.   
  201.                       
  202.             </div>  
  203.         </div>  
  204.   
  205.   
  206.     </body>  
  207. </html>  

 

posted @ 2014-08-19 16:39  super1234  阅读(1042)  评论(0)  编辑  收藏  举报