共有三款表白
效果1 ：
效果2：
效果3：
唯美
返回
爱的宣誓
人物：浟佳 & 宝贝
不在乎曾经拥有，只在乎天长地久。
爱，就要说出来！
再美好的回忆，也只是回忆；
再美丽的诺言，不到实现的那一刻，也只是一句空话。
--
返回
恋爱历程
人物：浟佳 & 宝贝
宝贝你还记得么？
XX年X月X日。
我们在xx相遇。
然后.........
过程.........
我爱你，我会一直陪在你身边
不离不弃
-
返回
絮叨絮叨
浟佳
--by
分享我所知道的
--by
返回
祝福我们
返回
爱的映像
返回
时光沙漏
宝贝你知道我爱你爱了多久了吗？
爱：从2014-2-6开始！
by 浟佳
/* Left & Right alignment */
.left { float:left;}
.right { float:right;}
.wrapper {width:100%; overflow:hidden;}
.relative{ position:relative;}
/* Global properties ======================================================== */
body{ background: url(../images/bg.jpg) no-repeat top center; border:0; font:12px 'Droid Sans', sans-serif; color:#939090; line-height:21px; min-width:946px; overflow:hidden}
.css3{border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; box-shadow: 0 0 4px rgba(0, 0, 0, .4); -moz-box-shadow: 0 0 4px rgba(0, 0, 0, .4); -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4); position: relative;}
.page_spinner{ position:absolute;background: url(../images/bg.gif) ; z-index:99; width:100%; height:100%; top:0; left:0}
.page_spinner div{ position:absolute;background: url(../images/loader.gif) 50% 50% no-repeat;width:100%; height:100%; top:0; left:0}
.left_block{ float:left; width:220px; background:#fff;}
/* Global Structure ============================================================= */
.main { margin: 0 auto; width: 946px; position:relative; }
.centre{margin-top:0; position:relative;}
body, html{ height:100%;}
.over{ position:relative; width:100%; overflow:hidden;min-height:100%; height:auto !important;}
.bg1{ position:absolute; left:0; width:100%; height:64px; background:url(../images/bg_footer.png) 0 0 repeat-x; bottom:0}
/* ============================= main layout ====================== */
a{ color:#939090; text-decoration: none; outline:none}
a:hover{}
h1{ position:absolute; top:184px; left:329px; z-index:10}
h2{ font:30px 'Amatic SC', cursive; line-height:1.2em; padding:0 0 24px 0; color:#3e3434; text-align:center; letter-spacing:-3px; font-weight:bold; text-shadow:0 0 #3e3434; font-family:"微软雅黑"}
h2 span{ display:block; font-size:24px; color:#766f6f; line-height:1.2em; letter-spacing:-1px; text-shadow:0 0 #766f6f; padding-bottom:4px;}
p{ padding-bottom:18px;}
/* ============================= header ====================== */
header{}
#logo{ display:block;}
#logo img{ position:relative; top:25px; left:25px}
.menu{}
#menu {}
#menu > li { position:absolute;}
#menu > li > img{ position:relative; z-index:6; top:15px; left:15px;}
#menu > li > span{ position: absolute; width:145px; top:82px; color:#fff; text-align:center; left:15px; text-shadow:1px 1px rgba(0,0,0,.2); z-index:9}
#nav1{ top:105px; left:304px;}
#nav2{ top:239px; left:230px;}
#nav3{ top:372px; left:304px;}
#nav4{ top:372px; left:458px;}
#nav5{ top:239px; left:536px;}
#nav6{ top:105px; left:458px;}
#navigation{ position:absolute; z-index:12; top:120px; left:245px; height:424px; width:451px;}
.submenu{ position:absolute; top:113px; left:-98px; z-index:13;}
.submenu ul{ background:url(../images/bg_submenu.gif) repeat; padding:16px 5px; width:122px; position:relative; border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;}
.submenu li{ line-height:40px; position:relative;}
.submenu a{ position:relative; color:#fff; display:block; padding:0 23px;}
.submenu img{ position:absolute; width:100%; height:0; top:20px; left:0}
/* ============================= content ====================== */
#content{ height:636px; padding-bottom:64px;}
#content > ul > li{ position:relative; left:225px; top:27px; width:100%;}
.bg_cont{ position:absolute; top:0; left:0; z-index:1}
.pad{ position:relative; z-index:2; left:94px; top:110px; width:388px; height:430px; font-size: 16px; line-height: 32px;}
.link1{ position:relative;}
.link1 span{ position: absolute; bottom:0; left:0; width:0; height:1px;}
.back{ position:absolute; top:212px; left:163px; z-index:6}
.back img{ position: relative; top:15px; left:15px;}
.back a{ position:absolute; top:85px; left:15px; color:#fff; text-align:center; width:145px; text-shadow:1px 1px rgba(0,0,0,.4)}
.color1{ color:#3e3434}
.pad_bot1{ padding-bottom:12px;}
.pad_left1{ padding-left:35px;}
.marg_right1{ margin-right:20px;}
#icons{ padding-top:28px; text-align:center}
#icons li{ display:inline-block; margin-top:-12px; margin-right:5px;}
#icons a{ display:block; position:relative;}
#icons .img_act{ position:absolute; top:0; left:0}
.scroll{height:308px; width:362px; overflow:hidden;}
.track{ width:22px; height:287px; padding:24px 0; top:28px !important; left:366px !important; background: url(../images/scroll_track.jpg) 0 0 no-repeat}
.shuttle{ width:16px; height:16px; background: url(../images/scroll_drag.png) 0 0 no-repeat; margin-left:3px;}
._up-butt, ._down-butt{ height:0px !important;}
.gallery{}
.gallery li{ float:left; margin-bottom:13px; margin-right:14px;}
.gallery a{ display:block; position:relative;}
.gallery .last{ margin-bottom:0;}
.gallery span{ position:absolute; top:0; left:0; background:url(../images/border1.png) 0 0 no-repeat; width:100%; height:100%;}
.comments{ float:right; margin-left:20px; line-height:26px; margin-top:7px;}
.comments strong{ float:left; margin-right:2px; background:url(../images/bg_comments.png) 0 0 no-repeat; color:#fff; width:40px; text-align:center; font-weight:normal}
.date{ float:left; width:41px; height:34px; background:#ececec; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; line-height:16px; color:#3e3434; padding:3px 0; text-transform:uppercase; text-align:center; margin-right:14px;}
.blog{ width:100%; height:260px; overflow:hidden; margin-bottom:15px}
.next, .prev{ float:left; color:#3e3435; line-height:24px; padding:0 7px; margin-right:9px; margin-left:10px; background-color:#ececec; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; position:relative;}
.prev{ margin-left:15px;}
.pagin{ float:left;}
.pagin a{ float: left; font-size:11px; width:24px; line-height:24px; color:#1b1b1b; text-align:center; margin-left:1px; margin-right:1px;background-color:#ececec; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; position:relative;}
.google_map{width:384px; height:303px; position:relative; z-index:1; background:#fff; margin-bottom:21px;border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; overflow:hidden;}
.col1{ width: 164px; float:left;}
/* ============================= footer ====================== */
footer { color:#000000; padding-top:21px;}
footer a{ color:#000000}
footer a:hover{}
.social{ float:right;}
.social li{ float:left; margin-right:9px; padding-right:10px; background:url(../images/footer_line.gif) right 6px no-repeat}
.social .last{ background:none; margin-right:0; padding-right:0}
.social a{ position:relative;}
.social span{ position: absolute; bottom:0; left:0; width:0; height:1px;}
/* ============================= forms ============================= */
#ContactForm{}
#ContactForm .wrapper{ overflow:inherit; min-height:40px;}
#ContactForm .success{ padding-bottom:15px; display:none}
#ContactForm label{ position:relative;min-height:22px; display: inline-block;}
#ContactForm .message{ height:222px;}
#ContactForm span{ display:block}
#ContactForm .error, #ContactForm .empty{ font-size:10px; color:#4d820a; line-height:14px; display:none; width:100%}
#ContactForm a{ margin-left:20px; float:right;}
#ContactForm .input { margin:0;width:181px; height:15px; background: none; padding:3px 10px;color:#474747; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;}
#ContactForm textarea { overflow: auto; margin:0;resize:none}
#ContactForm .bg{ background:#fff; border-top:1px solid #c2c2c2; border-left:1px solid #c2c2c2; position:relative;border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; display:inline-block;}
/* ============================= forms ============================= */
#ContactForm{ position:relative;}
#ContactForm .wrapper{ overflow:inherit; min-height:50px;}
#ContactForm .success{ display:none; position:absolute; bottom:0; left:0; color:#fff}
#ContactForm label{ position:relative;min-height:34px; display: inline-block;}
#ContactForm .message{ height:97px;}
#ContactForm span{ display:block}
#ContactForm .error, #ContactForm .empty{ font-size:10px; color:#fff; line-height:14px; display:none; width:100%}
#ContactForm a{ margin-left:20px; float:right;}
#ContactForm .input { margin:0;width:282px; height:16px; padding:8px;color:#727272; font:13px Arial, Helvetica, sans-serif;}
#ContactForm textarea { overflow: auto; margin:0;resize:none;width:594px; height:58px; padding:8px;color:#727272; font:13px Arial, Helvetica, sans-serif;}
#ContactForm .bg{ display:inline-block;}
#ContactForm .pad_left1{ padding-left:12px;}
#ContactForm .col1{ width:300px;}
#ContactForm {
padding:0;
}
#ContactForm .bg{
padding:0;
display: inline-block;
float: left;
position: relative;
}
#ContactForm .wrapper {
overflow:inherit;
min-height:40px;
}
#ContactForm .success {
padding-bottom: 0px;
text-transform:uppercase;
font-size:10px;
position:relative;
float:left;
color: #000;
width: 100%;
line-height: 11px;
}
#ContactForm label {
position:relative;
display:inline-block;
float: left;
width: 100%;
padding-bottom: 6px;
}
#ContactForm span {
display:block
}
#ContactForm .error,#ContactForm .empty {
font-size:9px;
color: #796D71;
line-height:9px;
display:none;
width: 100%;
top:0px;
position:relative;
text-transform:uppercase;
float: left;
}
#ContactForm a {
position:relative;
z-index:1;
}
#ContactForm a:hover {text-decoration:none;}
#ContactForm .input {
width: 235px;
padding: 8px 10px;
color: #796D71;
outline:none;
font-size: 12px;
font-family: Arial;
}
#ContactForm textarea {
overflow:auto;
margin:0;
width: 330px;
height: 125px;
padding: 10px 10px;
color: #796d71;
resize:none;
outline:none;
font-size: 12px;
font-family: Arial;
}
#ContactForm .block {
display:inline-block;
position:relative;
width: 100%;
float: left;
}
#ContactForm .magRight1{margin-right:16px;}
.formButtons{position:relative; float: right; display: inline-block;margin-top: 58px; margin-right:20px; font-weight:bold;}
.formBtn{display:inline-block; position:relative; margin-right: 6px;}
.signature{margin-top:10px;font-size:20px;font-style:italic}
#copyright{text-align:center;width:100%;color:#666}
.fancybox img{width:167px;height:130px}
/* ============================= end forms ============================= */
$(document).ready(function() {
$('.navigation').append('')
$('.navigation').append('')
$('.navigation').append('')
$('.navigation').append('')
$('.navigation').append('')
$('.navigation').append('')
$('.navigation').append('');
$('.map_back').append('')
$('.map_logo').append('')
// hover
var n;
$('.navigation area').hover(function(){
n=$(this).attr('class');
fl2=false;
if (n=='logo') {
$('#logo img').stop().animate({width:270, height:294, left:5, top:5}, 600, 'easeOutBack')
} else {
n=parseInt(n.slice(-1))
$('#nav'+n+'> img').css({zIndex:8}).stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack', function(){$(this).css({zIndex:7})})
$('#nav'+n+'> div').stop(true, true).animate({height:'show'}, function(){})
}
}, function(){
var n=$(this).attr('class');
if (n=='logo') {
$('#logo img').stop().animate({width:230, height:254, left:25, top:25}, 600, 'easeOutBack')
} else {
n=parseInt(n.slice(-1));
$('#nav'+n+'> img').stop().animate({width:145, height:157, left:15, top:15}, 600, 'easeOutBack', function(){$(this).css({zIndex:6})})
$('#nav'+n+'> div').stop(true, true).delay(200).animate({height:'hide'}, function(){})
}
})
$('.logo').hover(function(){
$('#logo img').stop().animate({width:270, height:294, left:5, top:5}, 600, 'easeOutBack')
}, function(){
$('#logo img').stop().animate({width:230, height:254, left:25, top:25}, 600, 'easeOutBack')
})
$('#back, .back a').hover(function(){
$('.back img').stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack')
}, function(){
$('.back img').stop().animate({width:145, height:157, left:15, top:15}, 600, 'easeOutBack')
})
$('.submenu li').hover(function(){
$(this).find('img').stop().animate({height:40, top:0},600,'easeOutCirc')
}, function(){
$(this).find('img').stop().animate({height:0, top:20},600,'easeOutCirc');
})
$('.submenu').stop().animate({height:'hide'},0)
$('.submenu').hover(function(){
$('#nav'+n+'> img').css({zIndex:8}).stop().animate({width:165, height:177, left:5, top:5}, 600, 'easeOutBack', function(){$(this).css({zIndex:7})})
$('#nav'+n+'> div').stop(true, true).animate({height:'show'}, function(){})
}, function(){
fl=false;
$('.navigation area').mouseleave()
})
$('.link1, .social a').each(function(){
var color=$(this).css('color')
$(this).prepend('')
$(this).find('span').css({background:color})
})
$('.link1, .social a').hover(function(){
$(this).find('span').css({width:0, opacity:1}).stop().animate({width:'100%'})
}, function(){
$(this).find('span').stop().animate({opacity:0})
})
$('#icons .img_act').css({opacity:0})
$('#icons a').hover(function(){
$(this).find('.img_act').stop().animate({opacity:1})
}, function(){
$(this).find('.img_act').stop().animate({opacity:0})
})
/*
$('.gallery span').css({opacity:0})
$('.gallery a').hover(function(){
$(this).find('span').stop().animate({opacity:1}, function(){$(this).css({opacity:'none'})})
}, function(){
$(this).find('span').stop().animate({opacity:0})
})
*/
// fancybox
/*
$("a[rel=Appendix]").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return 'Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '';
}
});
*/
// blog
$('.blog').cycle({
fx: 'scrollVert',
pager:'.pagin', // selector for element to use as pager container
activePagerClass: 'active', // class name used for the active pager link
timeout: false, // milliseconds between slide transitions (0 to disable auto advance)
speed: 800, // speed of the transition (any valid fx speed value)
prev: '.prev', // selector for element to use as event trigger for previous slide
next: '.next' // selector for element to use as event trigger for next slide
});
if ($.browser.msie && $.browser.version == 8) {
var num=0;
$('.pagin a').each(function(num){$(this).data({num:num})})
$('.pagin a').eq(num).addClass('active')
$('.pagin a').click(function(){
num=$(this).data('num')
$(this).addClass('active').siblings().removeClass('active')
})
$('.prev').click(function(){
if (num!=0) {num=num-1} else {num=$('.pagin a').length-1}
$('.pagin a').eq(num).addClass('active').siblings().removeClass('active')
})
$('.next').click(function(){
if (num!=$('.pagin a').length-1) {num=num+1} else {num=0}
$('.pagin a').eq(num).addClass('active').siblings().removeClass('active')
})
} else {
$('.prev, .next').hover(function(){
$(this).stop().animate({color:'#fff', backgroundColor:'#3e3435'})
}, function(){
$(this).stop().animate({color:'#3e3435', backgroundColor:'#ececec'})
})
$('.pagin .active').css({background:'none', fontWeight:'bold'})
$('.pagin a').click(function(){
$(this).stop().css({background:'none', fontWeight:'bold', color:'#1b1b1b'}).siblings().css({ fontWeight:'normal'}).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})
})
$('.pagin a').hover(function(){
if (!$(this).hasClass('active')) {
$(this).stop().animate({color:'#fff', backgroundColor:'#3e3435'})
}
}, function(){
if (!$(this).hasClass('active')) {
$(this).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})
}
})
$('.prev, .next').click(function(){
$('.pagin .active').stop().css({background:'none', fontWeight:'bold', color:'#1b1b1b'}).siblings().css({ fontWeight:'normal'}).stop().animate({color:'#1b1b1b', backgroundColor:'#ececec'})
})
}
});
$(window).load(function() {
var fl_cont=true;
$('a, area').click(function(){
if (!fl_cont) {
return false
}
})
// scroll
$('.scroll').cScroll({
duration:700,
step:63,
trackCl:'track',
shuttleCl:'shuttle'
})
$('#menu > li').each(function(num){
$(this).data({left:$(this).css('left'), top:$(this).css('top')})
})
//content switch
var content=$('#content'),
nav=$('.menu');
nav.navs({
useHash:true
})
content.tabs({
actFu:function(_){
if (_.prev && _.curr) {
fl_cont=false;
_.prev.find('.pad').stop().animate({opacity:0}, function(){
$(this).css({display:'none'});
_.prev.find('.back').stop().animate({opacity:0}, function(){$(this).css({top:212, left:163, opacity:1, display:'none'}); $(this).css({opacity:'none'})})
_.prev.find('.bg_cont').stop().animate({top:303, left:281, width:0, height:0}, 600, 'easeInBack', function(){
_.curr.find('.back').css({top:384, left:477, opacity:0, display:'block'}).stop().animate({opacity:1}, function(){$(this).css({opacity:'none'})})
_.curr.find('.bg_cont').stop().animate({top:0, left:0, width:562, height:606}, 600, 'easeOutBack', function(){
_.curr.find('.pad').css({display:'block'}).stop().animate({opacity:1}, function(){
$(this).css({opacity:'none'});
fl_cont=true;
})
})
})
})
} else {
if (_.curr) {
fl_cont=false;
$('#navigation').css({display:'none'})
$('#menu > li').stop().animate({top:239, left:385},1000,'easeInBack', function(){
$(this).find(' > img').stop().animate({top:92, left:88, width:0, height:0},1000,'easeInBack', function(){})
$('#menu > li').css({display:'none'});
$('h1').stop().animate({top:-16, left:44}, 600, 'easeInBack')
_.curr.find('.back').css({display:'block'});
_.curr.find('.back').stop().animate({top:384, left:477}, 600, 'easeOutBack', function(){
_.curr.find('.bg_cont').stop().animate({top:0, left:0, width:562, height:606}, 600, 'easeOutBack', function(){
_.curr.find('.pad').css({display:'block'}).stop().animate({opacity:1}, function(){
$(this).css({opacity:'none'});
fl_cont=true;
})
})
})
})
fl=false;
$('.navigation area').mouseleave()
}
if (_.prev) {
fl_cont=false;
_.prev.find('.pad').stop().animate({opacity:0}, function(){
$(this).css({display:'none'});
_.prev.find('.bg_cont').stop().animate({top:303, left:281, width:0, height:0}, 600, 'easeInBack', function(){
$('h1').stop().animate({top:184, left:329}, 600, 'easeInBack')
_.prev.find('.back').mouseleave();
_.prev.find('.back').stop().animate({top:212, left:163}, 600, 'easeOutBack', function(){
_.prev.find('.back').css({display:'none'});
$('#menu > li').css({display:'block'});
$('#navigation').css({display:'block'})
var num=$('#menu > li').length;
for (i=0;i li').eq(i);
th.stop().delay(220*i).animate({top:th.data('top'), left:th.data('left')}, 600, 'easeOutBack')
th.find(' > img').stop().delay(220*i).animate({top:15, left:15, width:145, height:157},600,'easeOutBack', function(){})
}
fl_cont=true;
})
})
})
}
}
},
preFu:function(_){
$('#content > ul > li').css({position:'absolute'})
$('.bg_cont').css({top:303, left:281, width:0, height:0})
$('.pad').css({opacity:0, display:'none'})
$('.back').css({display:'none'})
}
})
nav.navs(function(n, _){
content.tabs(n)
if(n=="#!/page_Time")
googleMap()
})
function googleMap(){
/*
if(googleMap.ready)
return false
googleMap.ready=true
;(function afterAnimation(){
var tmp=$('*:animated')
if(tmp.length)
$.when(tmp)
.then(afterAnimation)
else{
var cssPath='.google_map'
,holder=$(cssPath)
,src='http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Brooklyn,+New+York,+NY,+United+States&aq=0&sll=37.0625,-95.677068&sspn=61.282355,146.513672&ie=UTF8&hq=&hnear=Brooklyn,+Kings,+New+York&ll=40.649974,-73.950005&spn=0.01628,0.025663&z=14&iwloc=A&output=embed'
,str=''
holder.html(str)
}
})()
*/
}
var m_top=0, h_cont=730;
function centre() {
var h=$(window).height();
if (h>h_cont) {
m_top=(h-h_cont)/2+30;
} else {
m_top=30
}
$('.centre').stop().animate({paddingTop:m_top})
}
centre();
$(window).resize(centre);
}) 下载地址： 大学生情人节，520表白html源代码-Javascript文档类资源-CSDN下载采用HTML+CSS+JavaScript实现，内置有3款表白代码，造型独特。更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/qgy92320/85404291
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）