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

2024-04-27 14:33:15

字体：大中小

来源：转载

供稿：网友

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

Html代码

<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>发送微博页面</title>
<style>
html{padding:0px;margin:0px;}
body{padding:0px;margin:0px;text-align:center;}
/**弹出层背景**/
.pop-bg{filter:alpha(opacity=10);-moz-opacity:0.1;-khtml-opacity:0.1;opacity:0.1;border-radius:15px;box-shadow:01px1pxrgba(255,255,255,0.8)inset,1px1px3pxrgba(0,0,0,0.2),0004pxrgba(188,188,188,0.5);}
.pop-body{padding:10px;}
.pop-body-title{float:left;border-radius:10px;width:100%;border:1pxsolid#4096ee;}
.title-text{float:left;color:black;font-size:22px;padding-left:10px;}
.title-close{float:right;cursor:pointer;padding-right:15px;padding-top:3px;}
.title-closea{text-decoration:none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;}
.title-closea:hover{text-decoration:none;color:red;display:inline-block;background:#c0d3e7;border-radius:5px;padding-left:5px;padding-right:5px;}
/**内容部份**/
.pop-body-context{
border-radius:10px;width:100%;border:1pxsolid#4096ee;
float:left;
margin-top:15px;
}
.pop-body-c-title{
float:left;
}
.a-btn{
-moz-border-bottom-colors:none;
-moz-border-image:none;
-moz-border-left-colors:none;
-moz-border-right-colors:none;
-moz-border-top-colors:none;
-moz-transition:all0.3slinear0s;
background:-moz-linear-gradient(centertop,#FEDA710%,#FEBB4A100%)repeatscroll00transparent;
border-color:#F5B74E#E5A73E#D6982F;
border-radius:4px4px4px4px;
border-style:solid;
border-width:1px;
box-shadow:01px1px#D3D3D3,01px0#FEE395inset;
display:inline-block;
float:left;
height:34px;
margin:10px;
margin-right:3px;
margin-left:4px;
overflow:hidden;
padding:5px130px00px;
position:relative;
text-decoration:none;
}
.a-btn-text{
padding-top:5px;
display:block;
font-size:14px;
white-space:nowrap;
color:#996633;
text-shadow:01px0#fedd9b;
-webkit-transition:all0.3slinear;
-moz-transition:all0.3slinear;
-o-transition:all0.3slinear;
transition:all0.3slinear;
font-weight:bold;
}
.a-btn-slide-text{
position:absolute;
top:35px;
left:0px;
width:auto;
height:0px;
background:#fff;
color:#996633;
font-size:13px;
white-space:nowrap;
font-family:Georgia,serif;
font-style:italic;
overflow:hidden;
line-height:40px;
-webkit-box-shadow:-1px0px1pxrgba(255,255,255,0.4),1px1px1pxrgba(0,0,0,0.5)inset;
-moz-box-shadow:-1px0px1pxrgba(255,255,255,0.4),1px1px1pxrgba(0,0,0,0.5)inset;
box-shadow:-1px0px1pxrgba(255,255,255,0.4),1px1px1pxrgba(0,0,0,0.5)inset;
-webkit-transition:height0.3slinear;
-moz-transition:height0.3slinear;
-o-transition:height0.3slinear;
transition:height0.3slinear;
}
.a-btn-icon-right{
position:absolute;
right:0px;
top:0px;
height:41px;
width:130px;
border-left:1pxsolid#f5b74e;
-webkit-box-shadow:1px0px1pxrgba(255,255,255,0.4)inset;
-moz-box-shadow:1px0px1pxrgba(255,255,255,0.4)inset;
box-shadow:1px0px1pxrgba(255,255,255,0.4)inset;
}
.a-btn:hover{
height:65px;
-webkit-box-shadow:0px1px1pxrgba(255,255,255,0.8)inset,1px1px5pxrgba(0,0,0,0.4);
-moz-box-shadow:0px1px1pxrgba(255,255,255,0.8)inset,1px1px5pxrgba(0,0,0,0.4);
box-shadow:0px1px1pxrgba(255,255,255,0.8)inset,1px1px5pxrgba(0,0,0,0.4);
}
.a-btn:hover.a-btn-text{
text-shadow:1px1px1pxrgba(0,0,0,0.2);
color:#fff;
}
.a-btn:hover.a-btn-slide-text{
height:40px;
}
.a-btn-slide-textinput{
float:left;
margin-top:4px;
margin-left:2px;
}
.pop-body-c-text{
padding-left:3px;
}
.pop-body-c-textarea{
width:780px;
height:100px;
}
.pop-body-row-u{
padding-top:5px;
padding-left:10px;
}
.a-t-i-r-t{
font-size:14px;height:20px;overflow:hidden;padding-top:8px;text-align:center;
}
.pop-body-images-l{
padding:10px;
}
.pop-body-ims-panel{
padding:10px;
}
.pop-b-i-i-img{
border-radius:8px;
float:left;
position:relative;
left:-20px;
}
.pop-b-i-i-unit{
float:left;
}
.pop-b-i-i-unitinput{
float:left;
position:relative;
z-index:99;
}
</style>
</head>
<body>
<br/>
<divstyle="float:left;width:820px;height:200px;position:relative;left:100px;">
<divclass="pop-bg"style="float:left;position:relative;width:820px;height:200px;"></div>
<divclass="pop-body"style="float:left;text-align:left;position:relative;top:-200px;width:98%;">
<divclass="pop-body-title">
<divclass="title-text">标题</div>
<divclass="title-close"><ahref="#">关闭</a></div>
</div>
<divclass="pop-body-context">
<divclass="pop-body-c-title">
<aclass="a-btn"href="#">
<spanclass="a-btn-text">栏目名称</span>
<spanclass="a-btn-icon-right"><divclass="a-t-i-r-t">请输入</div></span>
<spanclass="a-btn-slide-text"><inputsize="24"/></span>
</a>
<aclass="a-btn"href="#">
<spanclass="a-btn-text">中文名称</span>
<spanclass="a-btn-icon-right"><divclass="a-t-i-r-t">请输入</div></span>
<spanclass="a-btn-slide-text"><inputsize="24"/></span>
</a>
<aclass="a-btn"href="#">
<spanclass="a-btn-text">英文名称</span>
<spanclass="a-btn-icon-right"><divclass="a-t-i-r-t">请输入</div></span>
<spanclass="a-btn-slide-text"><inputsize="24"/></span>
</a>
<aclass="a-btn"href="#">
<spanclass="a-btn-text">适配类型</span>
<spanclass="a-btn-icon-right"><divclass="a-t-i-r-t">请输入</div></span>
<spanclass="a-btn-slide-text"><inputsize="24"/></span>
</a>
</div>
</div>
</div>
</body>
</html>