以下是 CSS3鼠标滑过动画线条边框特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>CSS3鼠标滑过动画线条边框特效</title>
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div class="service">
<div class="service-list">
<ul class="clearfix" id="J_service_container">
<li> <a href="">
<div class="item-box">
<h3>验证码</h3>
<h4>三网合一短信，语音通道</h4>
<h4>实时，稳定，易用</h4>
<h4>≤ 0.045元/条</h4>
<div class="overlay-start"></div>
<div class="overlay-bottom"></div>
<div class="overlay-left"></div>
<div class="overlay-top"></div>
<div class="overlay-right"></div>
<div class="start-point"> <i class="circle"></i> </div>
</div>
<div class="service-icon">
<div class="circle">+</div>
</div>
</a> </li>
<li> <a href="">
<div class="item-box">
<h3>短信通知</h3>
<h4>三网合一专属短信通道</h4>
<h4>支持自定义短信模板</h4>
<h4>≤ 0.045元/条</h4>
<div class="overlay-start"></div>
<div class="overlay-bottom"></div>
<div class="overlay-left"></div>
<div class="overlay-top"></div>
<div class="overlay-right"></div>
<div class="start-point"> <i class="circle"></i> </div>
</div>
<div class="service-icon">
<div class="circle">+</div>
</div>
</a> </li>
<li> <a href="">
<div class="item-box">
<h3>语音通知</h3>
<h4>根据通话时长定义通知效果</h4>
<h4>支持动态TTS文本转语音</h4>
<h4>≤ 0.055元/条</h4>
<div class="overlay-start"></div>
<div class="overlay-bottom"></div>
<div class="overlay-left"></div>
<div class="overlay-top"></div>
<div class="overlay-right"></div>
<div class="start-point"> <i class="circle"></i> </div>
</div>
<div class="service-icon">
<div class="circle">+</div>
</div>
</a> </li>
<li> <a href="">
<div class="item-box">
<h3>流量钱包充值</h3>
<h4>送手机流量，活动参与度更高</h4>
<h4>流量包灵活配置。成本可控</h4>
<h4>≤ 0.3元/M</h4>
<div class="overlay-start"></div>
<div class="overlay-bottom"></div>
<div class="overlay-left"></div>
<div class="overlay-top"></div>
<div class="overlay-right"></div>
<div class="start-point"> <i class="circle"></i> </div>
</div>
<div class="service-icon">
<div class="circle">+</div>
</div>
</a> </li>
<li> <a href="">
<div class="item-box">
<h3>私密专线</h3>
<h4>专线互通，屏蔽第三方呼入</h4>
<h4>保护用户隐私和业务安全</h4>
<h4>≤ 0.2元/次</h4>
<div class="overlay-start"></div>
<div class="overlay-bottom"></div>
<div class="overlay-left"></div>
<div class="overlay-top"></div>
<div class="overlay-right"></div>
<div class="start-point"> <i class="circle"></i> </div>
</div>
<div class="service-icon">
<div class="circle">+</div>
</div>
</a> </li>
<li> <a href="">
<div class="item-box">
<h3>通话录音</h3>
<h4>支持全程录音和按需录音</h4>
<h4>数据存储安全，支持调取</h4>
<h4>免费</h4>
<div class="overlay-start"></div>
<div class="overlay-bottom"></div>
<div class="overlay-left"></div>
<div class="overlay-top"></div>
<div class="overlay-right"></div>
<div class="start-point"> <i class="circle"></i> </div>
</div>
<div class="service-icon">
<div class="circle">+</div>
</div>
</a> </li>
</ul>
</div>
</div>
</body>
</html>
CSS代码(index.css):
@charset "utf-8";/*主要CSS*/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}
html{line-height:1}
ol,ul{list-style:none}
table{border-collapse:collapse;border-spacing:0}
caption,td,th{text-align:left;font-weight:400;vertical-align:middle}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}
a img{border:none}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
.button,a.button{color:#fff;background-color:#4CACE2;border:1px solid #4CACE2;text-align:center}
.button:hover,a.button:hover{background-color:#56BFFC;border-color:#56BFFC;transition:all .3s ease-in-out 0s}
.button-hollow,a.button-hollow{color:#999;background-color:#fff;border:1px solid #ddd}
.button-hollow:hover,a.button-hollow:hover{background-color:#eee;border-color:#eee;transition:all .3s ease-in-out 0s}
*{box-sizing:border-box}
body,html{position:relative;width:100%;height:100%;line-height:1.5;font-family:'hiragino sans gb w3','hiragino sans gb','Microsoft YaHei',arial,helvetica,simsun,Tahoma,sans-serif;font-size:14px;font-style:normal;font-variant-caps:normal;font-weight:400;color:#666;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{text-decoration:none}
img{max-width:100%;vertical-align:middle}
.clearfix:after,.clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
.service{position:relative;background-color:#fff;zoom:1}
.service .service-list{position:relative;width:1218px;height:432px;margin:0 auto;overflow:hidden;zoom:1}
.service ul{position:absolute;left:0;top:0;width:1218px;height:432px;padding-top:5px;transition:left .8s ease-in-out}
.service li{float:left;width:406px;height:216px}
.service li a{position:relative;display:block;width:100%;height:216px;padding:10px 0 0 92px;zoom:1}
.service .item-box{position:relative;width:274px;height:186px;padding:20px 0 0 60px;background:url(../images/tb10tanjpxxxxblxpxxxxxxxxxx-274-186.png) 0 0 no-repeat;color:#00a0ff;zoom:1}
.service .overlay-start{position:absolute;bottom:-2px;right:-2px;width:34px;height:10px;background-color:#fff}
.service .overlay-bottom{position:absolute;left:-2px;bottom:-2px;width:295px;height:15px;background-color:#fff}
.service .overlay-left{position:absolute;left:-2px;top:-2px;width:15px;height:189px;background-color:#fff}
.service .overlay-top{position:absolute;right:-2px;top:-2px;width:295px;height:15px;background-color:#fff}
.service .overlay-right{position:absolute;right:-2px;bottom:-2px;width:15px;height:189px;background-color:#fff}
.service .service-icon{position:absolute;left:53px;top:35px;width:100px;height:110px;padding-top:12px;background-color:#fff;z-index:11}
.service .service-icon .circle{width:80px;height:80px;line-height:80px;background:url(../images/tb1.fjxivxxxxbqxvxxxxxxxxxx-80-80.png) 0 0 no-repeat;text-align:center;color:#359EFB;font-size:28px;}
.service .service-icon .iconfont{font-size:32px;color:#00a0ff}
.service .start-point{position:absolute;right:-8px;bottom:-3px;width:0;height:16px;background-color:#fff;overflow:hidden}
.service .start-point .circle{float:right;width:16px;height:16px;background:url(../images/tb15pjohvxxxxcaxpxxxxxxxxxx-16-16.png) 0 0 no-repeat}
.service h3{line-height:52px;font-size:24px;color:#666}
.service h4{line-height:27px;font-size:14px;color:#666}
.service a:hover h3,.service a:hover h4{color:#00a0ff}
.service a:hover .overlay-bottom{animation:borderslideBottom .15s linear 0s 1;animation-fill-mode:forwards}
.service a:hover .overlay-left{animation:bordersildeLeft .2s linear .15s 1;animation-fill-mode:forwards}
.service a:hover .overlay-top{animation:bordersildeTop .15s linear .35s 1;animation-fill-mode:forwards}
.service a:hover .overlay-right{animation:bordersildeRight .2s linear .5s 1;animation-fill-mode:forwards}
.service a:hover .start-point{animation:bordersildeEnd .1s linear .7s 1;animation-fill-mode:forwards}
.service .arrow{top:357px}
.case{position:relative;padding-top:10px;background-color:#fff;zoom:1}
.case .arrow{top:183px}
@-moz-keyframes slogan{0%{opacity:0;margin-top:0}
100%{opacity:1;margin-top:-30px}
}
@-webkit-keyframes slogan{0%{opacity:0;margin-top:0}
100%{opacity:1;margin-top:-30px}
}
@keyframes slogan{0%{opacity:0;margin-top:0}
100%{opacity:1;margin-top:-30px}
}
@-moz-keyframes clickme{0%{opacity:.2;transform:translate3d(0,-5px,0)}
100%{opacity:.8;transform:translate3d(0,5px,0)}
}
@-webkit-keyframes clickme{0%{opacity:.2;transform:translate3d(0,-5px,0)}
100%{opacity:.8;transform:translate3d(0,5px,0)}
}
@keyframes clickme{0%{opacity:.2;transform:translate3d(0,-5px,0)}
100%{opacity:.8;transform:translate3d(0,5px,0)}
}
@-moz-keyframes borderslideBottom{from{width:295px}
to{width:0}
}
@-webkit-keyframes borderslideBottom{from{width:295px}
to{width:0}
}
@keyframes borderslideBottom{from{width:295px}
to{width:0}
}
@-moz-keyframes bordersildeLeft{from{height:189px}
to{height:0}
}
@-webkit-keyframes bordersildeLeft{from{height:189px}
to{height:0}
}
@keyframes bordersildeLeft{from{height:189px}
to{height:0}
}
@-moz-keyframes bordersildeTop{from{width:295px}
to{width:0}
}
@-webkit-keyframes bordersildeTop{from{width:295px}
to{width:0}
}
@keyframes bordersildeTop{from{width:295px}
to{width:0}
}
@-moz-keyframes bordersildeRight{from{height:189px}
to{height:0}
}
@-webkit-keyframes bordersildeRight{from{height:189px}
to{height:0}
}
@keyframes bordersildeRight{from{height:189px}
to{height:0}
}
@-moz-keyframes bordersildeEnd{from{width:0}
to{width:34px}
}
@-webkit-keyframes bordersildeEnd{from{width:0}
to{width:34px}
}
@keyframes bordersildeEnd{from{width:0}
to{width:34px}
}
分享到QQ
分享到微博
微信扫一扫
