zoukankan      html  css  js  c++  java

  • 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;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;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- 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.     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.     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.     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;820px;height:200px;position:relative;left:100px;">  
    165.             <div class="pop-bg" style="float:left;position:relative;820px;height:200px;"></div>  
    166.             <div class="pop-body" style="float:left;text-align:left;position:relative;top:-200px;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>  

     
  • 相关阅读:
    设计模式（五）——单例模式
    设计模式（四）——工厂模式
    设计模式（三）—— 装饰者模式
    设计模式（二）—— 观察者模式
    JAVA环境配置
    在线求中位数
    不能对自己期望太大，但总是要拼一拼
    Leetcode | String to Integer (atoi)
    Leetcode | Simplify Path
    Leetcode | Longest Common Prefix
  • 原文地址：https://www.cnblogs.com/xiaochao12345/p/3922449.html
Copyright © 2011-2022 走看看