以下是 CSS3鼠标经过立体翻转切换特效 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3鼠标经过立体翻转切换特效 </title>
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" href="css/index-content.css" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>
<script type="text/javascript" src="js/global.js" ></script>
</head>
<body>
<div class="wrapbox YaHei">
<div class="cont-box">
<div class="regularly-box">
<div class="regularly-head">
<strong>定期宝</strong><label>年利率：7%-18%</label>
</div>
<div class="regularly-contBody">
<ul class="regularly-item-list">
<li class="first viewport-flip">
<div class="flip-box flip out">
<dl class="flip-lists">
<dd>
<i class="hot"></i>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="58"><span></span></div>
<label"fl">58%</label>
</div>
<div class="itmes-btn-ctrl">
<a href="#" class="hoverLink ctrl-btn">立即加入</a>
</div>
</div>
</dd>
<dd>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="100"><span></span></div>
<label"fl">100%</label>
</div>
<div class="itmes-btn-ctrl">
<span class="hoverLink ctrl-btn">抢光了</span>
</div>
</div>
</dd>
<dd>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="100"><span></span></div>
<label"fl">100%</label>
</div>
<div class="itmes-btn-ctrl">
<span class="hoverLink ctrl-btn">已完成</span>
</div>
</div>
</dd>
</dl>
</div>
<div class="flip-box flip">
<div class="item-title">短期宝</div>
<div class="item-tx">项目期限：90-270天</div>
<div class="item-tx">年化利率：<label>9-12%</label></div>
<div class="flip-item-pic"><img src="images/df-item-pic-1.jpg" width="150" height="150"></div>
<div class="flip-foot">适合人群：有闲置资金的</div>
</div>
</li>
<li class="viewport-flip">
<div class="flip-box flip out">
<dl class="flip-lists">
<dd>
<i class="hot"></i>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="58"><span></span></div>
<label"fl">58%</label>
</div>
<div class="itmes-btn-ctrl">
<a href="#" class="hoverLink ctrl-btn">立即加入</a>
</div>
</div>
</dd>
<dd>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="100"><span></span></div>
<label"fl">100%</label>
</div>
<div class="itmes-btn-ctrl">
<span class="hoverLink ctrl-btn">抢光了</span>
</div>
</div>
</dd>
<dd>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="100"><span></span></div>
<label"fl">100%</label>
</div>
<div class="itmes-btn-ctrl">
<span class="hoverLink ctrl-btn">已完成</span>
</div>
</div>
</dd>
</dl>
</div>
<div class="flip-box flip">
<div class="item-title">中期宝</div>
<div class="item-tx">项目期限：90-270天</div>
<div class="item-tx">年化利率：<label>9-12%</label></div>
<div class="flip-item-pic"><img src="images/df-item-pic-2.jpg" width="150" height="150"></div>
<div class="flip-foot">适合人群：有闲置资金的</div>
</div>
</li>
<li class="last viewport-flip">
<div class="flip-box flip out">
<dl class="flip-lists">
<dd>
<i class="hot"></i>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="58"><span></span></div>
<label"fl">58%</label>
</div>
<div class="itmes-btn-ctrl">
<a href="#" class="hoverLink ctrl-btn">立即加入</a>
</div>
</div>
</dd>
<dd>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="100"><span></span></div>
<label"fl">100%</label>
</div>
<div class="itmes-btn-ctrl">
<span class="hoverLink ctrl-btn">抢光了</span>
</div>
</div>
</dd>
<dd>
<h3>这里是项目名称</h3>
<div class="flip-itmes-info">
<strong>10%</strong>
<span class="to-day"><em>90</em>天</span>
<div class="to-price">总金额：<label>888.00</label></div>
</div>
<div class="flip-itmes-ctrl">
<div class="progress-info">
<label class="fl">已完成</label>
<div class="fl itmes-progress progress-tool" data="100"><span></span></div>
<label"fl">100%</label>
</div>
<div class="itmes-btn-ctrl">
<span class="hoverLink ctrl-btn">已完成</span>
</div>
</div>
</dd>
</dl>
</div>
<div class="flip-box flip">
<div class="item-title">长期宝</div>
<div class="item-tx">项目期限：90-270天</div>
<div class="item-tx">年化利率：<label>9-12%</label></div>
<div class="flip-item-pic"><img src="images/df-item-pic-3.jpg" width="150" height="150"></div>
<div class="flip-foot">适合人群：有闲置资金的</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--End 定期宝-->
</div>
</body>
</html>
JS代码(global.js):
$(function(){
var $regularlyItems=$(".regularly-item-list li");
$regularlyItems.each(function(){
var _$this=$(this);
_$this.children(".flip-box").eq(0).addClass("out").removeClass("in");
setTimeout(function(){
_$this.find(".flip-box").show().eq(1).addClass("in").removeClass("out");
_$this.children(".flip-box").eq(0).hide();
}
,225);
}
);
$regularlyItems.hover(function(){
var _$this=$(this);
_$this.children(".flip-box").eq(1).addClass("out").removeClass("in");
setTimeout(function(){
_$this.find(".flip-box").show().eq(0).addClass("in").removeClass("out");
_$this.children(".flip-box").eq(1).hide();
}
,225);
}
,function(){
var _$this=$(this);
_$this.children(".flip-box").eq(0).addClass("out").removeClass("in");
setTimeout(function(){
_$this.find(".flip-box").show().eq(1).addClass("in").removeClass("out");
_$this.children(".flip-box").eq(0).hide();
}
,225);
}
);
}
);
CSS代码(base.css):
@charset "utf-8";@import url("animate.css");html{color:#323232;background:white;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;}
body,button,input,select,textarea{font:12px SimSun,tahoma,arial,sans-serif;}
input,select,textarea{font-size:100%;}
table{border-collapse:collapse;border-spacing:0;}
th{text-align:inherit;}
fieldset,img{border:none;}
iframe{display:block;}
abbr,acronym{border:none;font-variant:normal;}
del{text-decoration:line-through;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}
q:before,q:after{content:'';}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
a{color:#323232;}
a:hover{text-decoration:noen;color:#e66a0d;}
ins,a{text-decoration:none;}
a:focus,*:focus{outline:none;}
.clearfix:before,.clearfix:after{content:"";display:table;}
.clearfix:after{clear:both;overflow:hidden;}
.clearfix{zoom:1;}
.clear{clear:both;display:block;overflow:hidden;height:0;line-height:0;font-size:0;}
.hide{display:none !important;visibility:hidden;}
.block{display:block !important;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
.opacity{filter:alpha(opacity=0);-moz-opacity:0;-webkit-opacity:0;opacity:0;}
.alpha{background:rgba(0,0,0,0.7) none repeat scroll 0 0 !important;filter:Alpha(opacity=70);background:#000;}
.radius_2{-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;}
.radius_3{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
.radius_5{-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
.radius_t5{-moz-border-radius:5px 5px 0px 0px;-webkit-border-radius:5px 5px 0px 0px;border-radius:5px 5px 0px 0px;}
.YaHei{font-family:"微软雅黑","microsoft yahei";}
.wrapbox{width:100%;min-width:1140px;height:auto;overflow:hidden;}
.cont-box{width:1140px;height:auto;margin:0 auto;}
.auto-box{width:auto;height:auto;display:block;}
.item-check{position:relative;display:inline-block;top:3px;margin:0 2px;}
.color-dft{color:#666666;}
.color-org{color:#e66a0d;}
.hoverLink{transition:width 0.3s;-moz-transition:width 0.3s;-webkit-transition:width 0.3s;-o-transition:width 0.3s;}
.hoverLink:hover{filter:alpha(opacity=80);-webkit-opacity:0.8;-moz-opacity:0.8;opacity:0.8;}
CSS代码(index-content.css):
@charset "utf-8";@import url("animate-tool.css");.regularly-box{height:auto;position:relative;border:3px solid #e7bc71;margin-top:50px;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;}
.regularly-head{height:50px;line-height:50px;padding:8px 20px;border-bottom:2px solid #e7bc71;}
.regularly-head strong{font-size:24px;color:#646464;display:inline-block;}
.regularly-head label{font-size:16px;color:#ed7c7c;display:inline-block;margin-left:15px;}
.regularly-contBody{height:425px;}
.regularly-item-list{width:auto;height:425px;}
.regularly-item-list li{width:376px;height:425px;float:left;display:inline;position:relative;border-right:2px solid #e7bc71;}
.regularly-item-list li.last{border-right:0;width:378px;}
.regularly-item-list li:not(.last):after{content:"";position:absolute;width:2px;height:10px;bottom:46px;right:-2px;background:#fff;}
.regularly-item-list li .flip-box{width:356px;height:405px;padding:10px;position:absolute;left:0;top:0;background:#fff;overflow:hidden;}
.regularly-item-list li.first .flip-box,.regularly-item-list li.first .flip-foot{-moz-border-radius:0px 0px 0px 5px;-webkit-border-radius:0px 0px 0px 5px;border-radius:0px 0px 0px 5px;}
.regularly-item-list li.last .flip-box{width:358px;}
.regularly-item-list li.last .flip-box,.regularly-item-list li.last .flip-foot{-moz-border-radius:0px 0px 5px 0px;-webkit-border-radius:0px 0px 5px 0px;border-radius:0px 0px 5px 0px;}
.regularly-item-list li .item-title{width:336px;height:68px;line-height:68px;background:#e7bc71;color:#fff;font-size:28px;margin:10px auto;margin-bottom:30px;font-weight:bold;text-align:center;box-shadow:0 2px 3px #c8c8c8;-moz-box-shadow:0 2px 3px #c8c8c8;-webkit-box-shadow:0 2px 3px #c8c8c8;text-shadow:0 2px 3px #9a5555;-moz-text-shadow:0 2px 3px #9a5555;-webkit-text-shadow:0 2px 3px #9a5555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
.regularly-item-list li .item-tx{width:336px;height:40px;line-height:40px;margin:0 auto;text-indent:38px;font-size:20px;color:#969696;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
.regularly-item-list li .item-tx label{color:#dea23b;font-size:26px;}
.regularly-item-list li .flip-item-pic{width:150px;height:150px;overflow:hidden;margin:10px auto;text-align:center;}
.regularly-item-list li .flip-item-pic img{max-width:100%;max-height:100%;vertical-align:middle;}
.regularly-item-list li .flip-foot{width:100%;height:46px;line-height:46px;position:absolute;padding:0 10px;left:-10px;bottom:0px;color:#fff;text-align:center;font-size:18px;background:#e7bc71;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
.regularly-item-list li .flip-lists{width:auto;display:block;height:100%;overflow:hidden;}
.regularly-item-list li .flip-lists dd{height:108px;padding:10px;border:1px solid #e7bc71;margin-bottom:7px;position:relative;}
.regularly-item-list li .flip-lists dd h3{height:36px;line-height:36px;font-size:18px;color:#646464;text-indent:24px;}
.regularly-item-list li .flip-lists dd .flip-itmes-info,.regularly-item-list li .flip-lists dd .flip-itmes-ctrl{height:32px;line-height:32px;color:#969696;position:relative;}
.regularly-item-list li .flip-lists dd .flip-itmes-info strong{display:inline-block;width:90px;vertical-align:middle;text-align:center;font-size:24px;color:#ff7e00;}
.regularly-item-list li .flip-lists dd .flip-itmes-info .to-day{display:inline-block;height:24px;line-height:24px;vertical-align:middle;min-width:32px;max-width:80px;padding:0 10px;background:#e5e5e5;font-size:14px;color:#969696;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
.regularly-item-list li .flip-lists dd .flip-itmes-info .to-day em{font-style:normal;font-size:18px;}
.regularly-item-list li .flip-lists dd .flip-itmes-info .to-price{width:auto;max-width:160px;height:32px;line-height:32px;position:absolute;right:0px;top:0;color:#969696;text-align:right;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
.regularly-item-list li .flip-lists dd .flip-itmes-info .to-price label{display:inline-block;font-size:18px;}
.regularly-item-list li .flip-lists dd .flip-itmes-ctrl{margin-top:5px;font-size:14px;}
.regularly-item-list li .flip-lists dd .progress-info{width:200px;height:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
.regularly-item-list li .flip-lists dd .itmes-progress{width:85px;height:8px;background:#e5e5e5;position:relative;margin:0 10px;margin-top:12px;overflow:hidden;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.regularly-item-list li .flip-lists dd .itmes-progress>span{width:0;display:block;position:absolute;height:100%;left:0;top:0;background:#ff7e00;border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;}
.regularly-item-list li .flip-lists dd .ctrl-btn{width:104px;height:28px;line-height:28px;font-size:18px;border:2px solid;display:inline-block;text-align:center;position:absolute;top:0px;right:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;border-radius:8px;-webkit-border-radius:8px;-moz-border-radius:8px;}
.regularly-item-list li .flip-lists dd a.ctrl-btn{border-color:#ff7e00;background:#ff7e00;color:#fff;}
.regularly-item-list li .flip-lists dd span.ctrl-btn{border-color:#969696;background:#fff;color:#969696;cursor:default;}
.regularly-item-list li .flip-lists dd .hot{width:46px;height:49px;display:block;position:absolute;background:url(../images/news-hot.png) no-repeat 0px 0px;top:-1px;left:-1px;z-index:99;}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:break-all;}
分享到QQ
分享到微博
微信扫一扫
