凯发k8官方网
收集整理的这篇文章主要介绍了
css3 实现厉害的文字和输入框组合效果
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
最近在忙着弄网站，学到了不少效果，这又是一个厉害的
html代码
<html> <head> <meta http-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: 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);} .pop-body{padding:10px;} .pop-body-title{float:left;border-radius: 10px;width:100%;border:1px solid #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-close a{text-decoration: none;color:black;font-weight:bold;padding-left:5px;padding-right:5px;} .title-close a: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:1px solid #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: all 0.3s linear 0s; background: -moz-linear-gradient(center top , #feda71 0%, #febb4a 100%) repeat scroll 0 0 transparent; border-color: #f5b74e #e5a73e #d6982f; border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; box-shadow: 0 1px 1px #d3d3d3, 0 1px 0 #fee395 inset; display: inline-block; float: left; height: 34px; margin: 10px; margin-right: 3px; margin-left: 4px; overflow: hidden; padding: 5px 130px 0 0px; position: relative; text-decoration: none; } .a-btn-text{ padding-top:5px; display:block; font-size:14px; white-space:nowrap; color:#996633; text-shadow:0 1px 0 #fedd9b; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; transition:all 0.3s linear; 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:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; -moz-box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; box-shadow:-1px 0px 1px rgba(255,255,255,0.4), 1px 1px 1px rgba(0,0,0,0.5) inset; -webkit-transition:height 0.3s linear; -moz-transition:height 0.3s linear; -o-transition:height 0.3s linear; transition:height 0.3s linear; } .a-btn-icon-right{ position:absolute; right:0px; top:0px; height:41px; width:130px; border-left:1px solid #f5b74e; -webkit-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; -moz-box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba(255,255,255,0.4) inset; } .a-btn:hover{ height:65px; -webkit-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); box-shadow:0px 1px 1px rgba(255,255,255,0.8) inset, 1px 1px 5px rgba(0,0,0,0.4); } .a-btn:hover .a-btn-text{ text-shadow:1px 1px 1px rgba(0,0,0,0.2); color:#fff; } .a-btn:hover .a-btn-slide-text{ height:40px; } .a-btn-slide-text input{ 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-unit input{ float:left; position:relative; z-index:99; } style> head> <body> <br /> <div style="float:left;width:820px;height:200px;position:relative;left:100px;"> <div class="pop-bg" style="float:left;position:relative;width:820px;height:200px;">div> <div class="pop-body" style="float:left;text-align:left;position:relative;top:-200px;width:98%;"> <div class="pop-body-title"> <div class="title-text">标题div> <div class="title-close"><a href="#">关闭a>div> div> <div class="pop-body-context"> <div class="pop-body-c-title"> <a class="a-btn" href="#"> <span class="a-btn-text">栏目名称span> <span class="a-btn-icon-right"><div class="a-t-i-r-t">请输入div>span> <span class="a-btn-slide-text"><input size="24"/>span> a> <a class="a-btn" href="#"> <span class="a-btn-text">中文名称span> <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入div>span> <span class="a-btn-slide-text"><input size="24"/>span> a> <a class="a-btn" href="#"> <span class="a-btn-text">英文名称span> <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入div>span> <span class="a-btn-slide-text"><input size="24"/>span> a> <a class="a-btn" href="#"> <span class="a-btn-text">适配类型span> <span class="a-btn-icon-right"><div class="a-t-i-r-t" >请输入div>span> <span class="a-btn-slide-text"><input size="24"/>span> a> div> div> div> body> html>
转载于:https://www.cnblogs.com/xiaochao12345/p/3922449.html
总结
以上是凯发k8官方网为你收集整理的css3 实现厉害的文字和输入框组合效果的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。
