纯CSS制作的对话框网页特效

时间：2013-11-23 来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯CSS制作的对话框特效代码</title>
<style type="text/css">
/*科e互联CSS基础框架*/
*{padding:0; margin:0; font-size:12px; list-style:none}
.cor_bs,.cor_bs:hover{ color: #ffffff; text-decoration: none; font-size:16px;}
.keBody{background:url(../images/bodyBg.jpg) repeat #333;}
.keTitle{height:100px; line-height:100px; font-size:30px; font-family:'微软雅黑'; color:#FFF; text-align:center;font-weight:normal}
.kePublic{ background: #fff url(http://www.internetke.com/jsEffects/2013111805/images/bg.jpg) repeat; padding-top: 25px; }
.keBottom{color:#FFF; padding-top:25px; line-height:28px; text-align:center; font-family:'微软雅黑'; padding-bottom:25px}
.keTxtP{font-size:16px; color:#ffffff;}
.keUrl{color:#FFF; font-size:30px;}
.keUrl:hover{ text-decoration: underline; color: #FFF; }
.button {display: inline-block;zoom: 1; *display: inline;vertical-align: baseline;margin: 0 2px;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 14px/100% Arial, Helvetica, sans-serif;padding:0.25em 0.6em 0.3em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em; -moz-border-radius: .5em;border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.red {color: #faddde;border: solid 1px #980c10;background: #d81b21;background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#A51715));background: -moz-linear-gradient(top,  #ed1c24,  #A51715);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ed1c24', endColorstr='#aa1317');
}
.red:hover { background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top,  #c9151b,  #a11115); filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9151b', endColorstr='#a11115'); color:#fff;}
.red:active {color: #de898c;background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24));background: -moz-linear-gradient(top,  #aa1317,  #ed1c24);filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#aa1317', endColorstr='#ed1c24');}
/*科e互联CSS基础框架结束，可删除*/
/*特效CSS代码 开始*/
.org_box{ width: 500px; height: 70px; margin: 40px auto; padding-left: 2em; background: #339933; position: relative; border-radius: 8px; font: 14px/20px "微软雅黑"; color: #FFF; padding-top: 10px; } 
.org_box_cor{ width:0; height:0; font-size:0;border-style:solid;overflow:hidden; position:absolute; }
.cor1{border-width:20px;border-color:#339933 transparent transparent transparent;left:60px; bottom:-40px;}
.cor2{border-width:20px;border-color:transparent #339933 transparent transparent;left:-40px; bottom:30px;}
.cor3{border-width:20px;border-color:transparent transparent #339933 transparent;left:80px; top:-40px;}
.cor4{border-width:20px;border-color:transparent transparent transparent #339933;right:-40px; bottom:30px;}
.cor5{border-width:20px 10px;border-color:#339933 #339933 transparent transparent;left:60px; bottom:-40px;}
.cor6{border-width:20px 10px;border-color:#339933 transparent #f00 transparent;left:-40px; bottom:30px;}
.cor7{border-width:20px 10px;border-color:transparent #339933 #339933 transparent;left:80px; top:-40px;}
.cor7{border-width:20px 10px;border-color:transparent #339933 #339933 transparent;left:80px; top:-40px;}
.box1{ height: 40px; background: #000; position: relative; font: 16px/40px Arial; color: #FFF; padding-left: 60px; }
.corner{width:0;height:0;font-size:0;border-width:20px 20px 20px;border-style:solid;border-color:#f00 transparent #f00 #f00  ;_border-color: #f00 white white white ;position:absolute;left:0;bottom:0;overflow:hidden;}
/*特效CSS代码 结束*/
</style>
</head>
<body class="keBody">
<h1 class="keTitle">纯CSS制作的对话框特效代码</h1>
<div class="kePublic">
<!--效果html开始-->
<div class="org_box"> <span class="org_box_cor cor1"></span>上边框有颜色,所以箭头冲下,定位的负值是边框宽度的2倍，宽度只有一个值，是等边三角形.要专门给IE6写HACK，将对应的transparent改为white.（以下省略这句描述）。 </div>
<div class="org_box"> <span class="org_box_cor cor2"></span>右边框有颜色值,所以箭头冲左 </div>
<div class="org_box"> <span class="org_box_cor cor3"></span>下边框有颜色,所以箭头冲上</div>
<div class="org_box"> <span class="org_box_cor cor4"></span>左边框有颜色,所以箭头冲右 </div>

<div class="org_box"> <span class="org_box_cor cor5"></span>上，右有颜色值，（宽度有两个值且不等，大家可以任意排列组合，图案很丰富） </div>
<div class="org_box"> <span class="org_box_cor cor6"></span>上，下颜色值（颜色值不一样，有惊喜,沙漏？高脚杯）</div>
<div class="org_box"> <span class="org_box_cor cor7"></span>右下有颜色值</div>
<p style="color:#f00;line-height:26px;">三个颜色值，有时也能用上,同样，改变颜色值顺序，开口方向不同。</p>
<div class="box1"><em class="corner"></em>网页特效整理：<a style="color:#fff;" href="http://www.internetke.com" target="_blank">www.internetke.com</a></div>
<!--效果html结束-->
</div>
<div class="keBottom">
<p class="keTxtP">科e互联网页特效集锦---更多特效请访问 <a class="keUrl" href="http://www.internetke.com" target="_blank">www.internetke.com</a></p>
<p class="keTxtP">本站导航：
<a href="http://www.internetke.com/" target="_blank" class="cor_bs">网站建设</a> | 
<a href="http://www.internetke.com/material/" target="_blank" class="cor_bs">网页素材</a> | 
<a href="http://www.internetke.com/effects/" target="_blank" class="cor_bs">网页特效</a> | 
<a href="http://www.internetke.com/share/" target="_blank" class="cor_bs">设计分享</a> | 
<a href="http://www.internetke.com/tutorial/" target="_blank" class="cor_bs">建站教程</a> | 
<a href="http://www.internetke.com/model/" target="_blank" class="cor_bs">网站模版</a> | 
<a href="http://www.internetke.com/appreciate/" target="_blank" class="cor_bs">酷站赏析</a>
</p>
<p class="keTxtP">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码为【科e整理/原创特效】仅供学习交流，请勿用于商业用途。
<a target="_blank" href="http://wp.qq.com/wpa/qunwpa?idkey=a7df3558c291e0407375b9ad649d96a6e507286ffeb0650c65a221d1500a0779" class="button red" title="北京网站建设,网页特效QQ交流群-科e互联">加入QQ交流群</a></p>
</div>
<!--广告代码开始-->
<div style="text-align:center"><script src='/plus/ad_js.php?aid=22' language='javascript'></script></div>
<!--广告代码结束-->
</body>
</html>

运行代码保存代码收藏分享评论提示：您可以先修改部分代码再运行。

特效说明：

纯CSS制作的对话框网页特效，该特效制作了各个方向对话框样式。（兼容测试：IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器）

标签 CSS特效

JS采用VUE制作无限极树形结构菜单展开收缩代码

2019-04-12
HTML5绘制动态线条像素背景动画特效

2019-04-12
jQuery网页视频在线播放器代码

2019-04-12
HTML5科幻空间动画背景网页特效

2019-04-12
jQuery滑动验证解锁插件slideunlock.js

2019-04-10

纯CSS制作的对话框网页特效

分类导航

最新更新特效

JS采用VUE制作无限极树形结构菜单展开收缩代码

HTML5绘制动态线条像素背景动画特效

jQuery网页视频在线播放器代码

HTML5科幻空间动画背景网页特效

jQuery滑动验证解锁插件slideunlock.js