必威体育Betway必威体育官网
当前位置：首页 > IT技术

生日快乐网站模板（个人制作）（HTML5+CSS3+JS）

时间:2019-06-22 23:41:05来源:IT技术作者:seo实验室小编阅读:88次「手机版」
　

生日祝福网页

 哈，前一阵子一个比较要好的朋友过生日，就给她做了一个网站作为生日祝福。也花了挺多的时间去复习了抛弃了有一段时间的HTML和CSS，又去学习了CSS3。最后做出来的效果自己还是挺满意的，因此在这里放出来，也希望能帮助到大家~

下载地址

Github：https://github.com/IcedSoul/tiny-heart

      效果图

 别的先不说，先放效果图。

 这个第一页具体代码不是我自己写的，而是使用的网上找到的这个很酷炫的登录效果，然后根据我自己的需求作出了一些修改，但是效果确实很棒，图片看不出来，这个的效果其实是动态的。

 关于密码，一个生日祝福网站也用不上连数据库什么的，做做样子就行了，后台写了一个简单的js判断（其实谁都拦不住的233333）但是，做网站就是为了装，自然要装出个样子来，不然我做这网站还有何用！

 这是登陆之后进入的界面，当然也是动态播放的，中间那个蛋糕是找的网上大神的代码，纯H5写的，我等渣渣只能膜拜，在此处对此特效的源码提供者表示真挚的感谢！旁边两个按钮和下面的字体是我自己弄的，按钮有惊喜哦，2333333.不信你把源码下下来看看，我专门弄得哈哈哈哈。

 这个就是最主体的内容了，除了整体的框架是采用Fullpage.js之外，代码全部是由自己完成的。内容因为涉及到隐私已经打码了，等下上传的源码我也会将文本替换掉的。想要直接使用的童鞋可以将他们替换为自己的文本。

 这张同样也做打码处理了，原因同上，涉及个人隐私。这些全都是有动态效果的哦。

      部分效果代码分析

 看过效果了，这里我来对一些效果的源码进行一下分析说明。相信如果需要用到这个的人肯定是要根据自己的需要更改效果和内容的，所以还是有必要说一下供大家学习的。

 登录效果、动态背景、蛋糕我就不说了，因为不是我写的，我也只是做了一些修改而已。我只说一下我写的内容和效果。

 因为这些内容也算是我自己学习CSS3的练习成品，因此代码看起来会有些凌乱和繁杂，也请大神不要吐槽。感谢~

<p class="button-style1">
	<a href="Memories.html" class="lk1">
		<p class="link1">
			<p class="bt1">
				我很喜欢
			</p>
		</p>
	</a>    
</p>
<p class="button-style2">
	<a class="lk2">
		<p class="link2">
			<p class="bt1">
				我不喜欢
			</p>
		</p>
	</a> 
</p>
.button-style1 ,.button-style2{
	position:absolute;
	top:41%;
	opacity:1;
	z-index:100;
}
.button-style1 {
	position:absolute;
	left:20%;
	animation:btn1 15s; /*这是CSS3的动画属性，着这里定义动画的名称和持续时间，也可以用animation-delay定义动画延时多少s播放*/
}
.button-style2 {
	position:absolute;
	left:68%;
	animation:btn2 15s;
}
@keyframes btn1 { /*这里是对动画的定义，我们只需要定义几个关键帧，它会自动完成补间。*/
	0% {
		opacity:0;
		left:43.5%;
	}
	70% {
		opacity:0;
		left:43.5%;
	}
	100% {
		opacity:1;
		left:20%;
	}
}
@-webkit-keyframes btn1 { /*这里是声明获取不同浏览器的支持，还有几个干脆我就懒得写了，反正我也不是给所有人写的，自己能看就行*/
	0% {
		opacity:0;
		left:43.5%;
	}
	70% {
		opacity:0;
		left:43.5%;
	}
	100% {
		opacity:1;
		left:20%;
	}
}
@keyframes btn2 {
	0% {
		opacity:0;
		left:43.5%;
	}
	70% {
		opacity:0;
		left:43.5%;
	}
	100% {
		opacity:1;
		left:68%;
	}
}
@-webkit-keyframes btn2 {
	0% {
		opacity:0;
		left:43.5%;
	}
	70% {
		opacity:0;
		left:43.5%;
	}
	100% {
		opacity:1;
		left:68%;
	}
}
.lk1,.lk2 {
	text-decoration:none;
	font-family: Microsoft YaHei;
	color:#fff;
	transition:all 0.5s;
}
.link1,.link2 {
	width:170px;
	height:60px;
	border:2px solid #fff;
	-webkit-border:1px solid #fff;
	border-radius:30px;
	font-size: 23px;
	text-align:center;
	background: #ee9ca7;
	transition:all 0.8s;
}
.link2 {
	cursor:not-allowed;
}
.bt1,.bt2 {
	position:relative;
	top:22%;
	vertical-align:middle;
}

a.lk1:hover { /*这里使用CSS选择器，定义鼠标滑过效果*/
	color:#ee9ca7;
	transition:all 0.5s;
}
.link1:hover {
	background-color:#fff;
	background-color:rgba(255,255,255,0,2);
	border:2px solid #BBB;
	transition:all 0.8s;
}
a.lk2:hover {
	color:#ee9ca7;
	transition:all 0.5s;
}
.link2:hover {
	background-color:#fff;
	background-color:rgba(255,255,255,0,2);
	border:2px solid #BBB;
	transition:all 0.8s;
}

 这个代码是两个按钮的代码，这些代码现在看来也挺傻的，纯属找事儿写这么多层，233.不过也懒得改了。具体看注释吧，没啥好说的。

<p class="section">
          <p class="ly-box01">
            <p class="ly-txt01">
              <p class="ly-stxt01">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt02">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt03">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt04">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt05">XXXXXXXXXXXXXXXXXXXXXXX</p>
            </p>
            <p class="ly-txt02">
              <p class="ly-stxt06">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt07">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt08">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt09">XXXXXXXXXXXXXXXXXXXXXXX</p>
              <p class="ly-stxt10">XXXXXXXXXXXXXXXXXXXXXXX</p>
            </p>
        </p>
      </p>

 这是点我很喜欢按钮跳转之后的第一页，对，HTML代码就这么少，但是。。。

.ly-box01 {
	width:50px;
	height:50px;
	background-color:#FFF;
	border-radius: 25px;
	position: absolute;
	left: 48%;
	bottom: 50%;
	margin-bottom:50%;
	overflow: hidden;
	transform-origin:center bottom;
	animation:box_to_point 18.5s 0s,bounce 2.5s 18.5s;
}

@keyframes box_to_point{
	0% {
		margin-bottom:50%;
		width:50px;
		height:50px;
		border-radius: 25px;
		position: absolute;
		left: 48%;
		bottom: 50%;
		}
	10% {
		margin-bottom:0;
		width:50px;
		height:50px;
		border-radius: 25px;
		background-color:rgba(255,255,255,1);
		position: absolute;
		left: 48%;
		bottom: 50%;
	}
	14% {
		margin-bottom:0;
		width: 80%;
		height: 550px;
		border-radius: 6px;
		background-color:rgba(255,255,255,0.5);
		position: absolute;
		left: 10%;
		bottom: 12%;
	}
	96% {
		margin-bottom:0;
		width: 80%;
		height: 550px;
		border-radius: 6px;
		background-color:rgba(255,255,255,0.6);
		position: absolute;
		left: 10%;
		bottom: 12%;
	}
	100% {
		margin-bottom:0;
		width:50px;
		height:50px;
		border-radius: 25px;
		background-color:rgba(255,255,255,1);
		position: absolute;
		left: 48%;
		bottom: 50%;
	}
}
@-webkit-keyframes box_to_point{
	0% {
		margin-bottom:50%;
		width:50px;
		height:50px;
		border-radius: 25px;
		position: absolute;
		left: 48%;
		bottom: 50%;
		}
	10% {
		margin-bottom:0;
		width:50px;
		height:50px;
		border-radius: 25px;
		background-color:rgba(255,255,255,1);
		position: absolute;
		left: 48%;
		bottom: 50%;
	}
	14% {
		margin-bottom:0;
		width: 80%;
		height: 550px;
		border-radius: 6px;
		background-color:rgba(255,255,255,0.5);
		position: absolute;
		left: 10%;
		bottom: 12%;
	}
	96% {
		margin-bottom:0;
		width: 80%;
		height: 550px;
		border-radius: 6px;
		background-color:rgba(255,255,255,0.6);
		position: absolute;
		left: 10%;
		bottom: 12%;
	}
	100% {
		margin-bottom:0;
		width:50px;
		height:50px;
		border-radius: 25px;
		background-color:rgba(255,255,255,1);
		position: absolute;
		left: 48%;
		bottom: 50%;
	}
}
@keyframes bounce{
	0% {
		margin-bottom:0;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		bottom:50%;
		left: 48%;
	}
	50% {
		margin-bottom:0;
		left: 48%;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		bottom:0;
		left: 48%;
	}
	100% {
		margin-bottom:0;
		width: 20px;
		height: 20px;
		border-radius: 10px;
		left: 48%;
		bottom: 0;
		left: 20%;
	}
}
@-webkit-keyframes bounce{
		0% {
		margin-bottom:0;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		bottom:50%;
		left: 48%;
	}
	50% {
		margin-bottom:0;
		left: 48%;
		width: 50px;
		height: 50px;
		border-radius: 25px;
		bottom:0;
		left: 48%;
	}
	100% {
		margin-bottom:0;
		width: 20px;
		height: 20px;
		border-radius: 10px;
		left: 48%;
		bottom: 0;
		left: 20%;
	}
}
/*文本*/
.ly-txt01 {
	position:absolute;
	width: 40%;
	left:10%;
	top:10%;
}
.ly-txt02 {
	position:absolute;
	width: 40%;
	left:60%;
	top:10%;
}
.ly-stxt01 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	left: 5%;
	top: 5%;
	opacity: 0;
	animation:ly-stxt01_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt01_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt01_move{
	0% {opacity:0;}
	8% {opacity:1;}
	90% {opacity:1;}
	98% {opacity:0;}
	100% {opacity:0;}
}
@-webkit-keyframes ly-stxt01_move{
	0% {opacity:0;}
	8% {opacity:0;}
	90% {opacity:1;}
	98% {opacity:0;}
	100% {opacity:0;}
}

.ly-stxt02 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	left: 5%;
	top: 5%;
	margin-top:-71px;
	opacity: 0;
	animation:ly-stxt02_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt02_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt02_move{
	0% {opacity:0;margin-top:-71px;}
	8% {opacity:0;margin-top:-71px;}
	16% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}
@-webkit-keyframes ly-stxt02_move{
	0% {opacity:0;margin-top:-71px;}
	8% {opacity:0;margin-top:-71px;}
	16% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}

.ly-stxt03 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	left: 5%;
	top: 5%;
	opacity: 0;
	margin-top:-71px;
	animation:ly-stxt03_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt03_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt03_move{
	0% {opacity:0;margin-top:-71px;}
	16% {opacity:0;margin-top:-71px;}
	24% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}
@-webkit-keyframes ly-stxt03_move{
	0% {opacity:0;margin-top:-71px;}
	16% {opacity:0;margin-top:-71px;}
	24% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}

.ly-stxt04 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	left: 5%;
	top: 5%;
	opacity: 0;
	margin-top:-71px;
	animation:ly-stxt04_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt04_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt04_move{
	0% {opacity:0;margin-top:-71px;}
	24% {opacity:0;margin-top:-71px;}
	32% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}
@-webkit-keyframes ly-stxt04_move{
	0% {opacity:0;margin-top:-71px;}
	24% {opacity:0;margin-top:-71px;}
	32% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}

.ly-stxt05 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	left: 5%;
	top: 5%;
	opacity: 0;
	margin-top:-71px;
	animation:ly-stxt05_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt05_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt05_move{
	0% {opacity:0;margin-top:-71px;}
	32% {opacity:0;margin-top:-71px;}
	40% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}
@-webkit-keyframes ly-stxt05_move{
	0% {opacity:0;margin-top:-71px;}
	32% {opacity:0;margin-top:-71px;}
	40% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}

.ly-stxt06 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	right: 5%;
	top: 5%;
	opacity: 0;
	animation:ly-stxt06_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt06_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt06_move{
	0% {opacity:0;}
	40% {opacity:0;}
	48% {opacity:1;}
	90% {opacity:1;}
	100% {opacity:0;}
}
@-webkit-keyframes ly-stxt06_move{
	0% {opacity:0;}
	40% {opacity:0;}
	48% {opacity:1;}
	90% {opacity:1;}
	100% {opacity:0;}
}

.ly-stxt07 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	right: 5%;
	top: 5%;
	opacity: 0;
	margin-top:-71px;
	animation:ly-stxt07_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt07_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt07_move{
	0% {opacity:0;margin-top:-71px;}
	48% {opacity:0;margin-top:-71px;}
	56% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}
@-webkit-keyframes ly-stxt07_move{
	0% {opacity:0;margin-top:-71px;}
	48% {opacity:0;margin-top:-71px;}
	56% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}

.ly-stxt08 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	right: 5%;
	top: 5%;
	opacity: 0;
	margin-top:-71px;
	animation:ly-stxt08_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt08_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt08_move{
	0% {opacity:0;margin-top:-71px;}
	56% {opacity:0;margin-top:-71px;}
	64% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}
@-webkit-keyframes ly-stxt08_move{
	0% {opacity:0;margin-top:-71px;}
	56% {opacity:0;margin-top:-71px;}
	64% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}

.ly-stxt09 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	right: 5%;
	top: 5%;
	opacity: 0;
	margin-top:-71px;
	animation:ly-stxt09_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt09_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt09_move{
	0% {opacity:0;margin-top:-71px;}
	64% {opacity:0;margin-top:-71px;}
	72% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}
@-webkit-keyframes ly-stxt09_move{
	0% {opacity:0;margin-top:-71px;}
	64% {opacity:0;margin-top:-71px;}
	72% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}

.ly-stxt10 {
	font-family: Microsoft YaHei;
	font-size: 30px;
	font-color: #000;
	position: relative;
	right: 5%;
	top: 5%;
	opacity: 0;
	margin-top:-71px;
	animation:ly-stxt10_move 15s;
	animation-delay:3s;
	-webkit-animation:ly-stxt10_move 15s;
	-webkit-animation-delay:3s;
}
@keyframes ly-stxt10_move{
	0% {opacity:0;margin-top:-71px;}
	72% {opacity:0;margin-top:-71px;}
	80% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}
@-webkit-keyframes ly-stxt10_move{
	0% {opacity:0;margin-top:-71px;}
	72% {opacity:0;margin-top:-71px;}
	80% {opacity:1;margin-top:0;}
	90% {opacity:1;margin-top:0;}
	100% {opacity:0;margin-top:0;}
}

 这全是我一行一行打的啊卧槽（其实一大半和上面一样是复制的，修改一部分，但是也很累啊！），不说别的了都是泪，效果就是那个动态。这里的最麻烦，因为使用了CSS3animation，而后面页面的动态效果使用的主要是CSS3的过渡效果，比这个要简单的多，所以后面的代码就不粘了。

 好好加油，骚年！撩妹成不成就看你码了多少行代码了！

      源码

CSDN下载地址我干脆就不放了，左上角下载方式那么大字，还一直有人私信评论让给我私发，我也很无奈啊。老哥们，左边翻到最上边，有QQ群号码，加群可以下载。不要积分的 = =。

相关阅读

32岁生日快乐：聊聊公司那点事

图为1997年10月2日，在北京的北海公园，那一年我12岁!图为2017年4月在上海黄浦江照，这一年，我32岁，后面那只小手是我儿子。转眼间，20年过

我的31岁生日快乐：聊聊朋友

从写博客开始，每年过生日都会写一篇日志，等过几年再翻来看看会别有一番滋味。今天也不例外，8月21日，今天也是我31岁生日。这也是我参

祝我生日快乐

生日快乐我对自己说，蜡烛点了，寂寞亮了!谢谢烟圈圈，渣渣，WinsOn，梅子，小蔡。永别了我的20岁，你好21。

赞()
分享到:

猜你喜欢

栏目导航

推荐阅读

热门阅读

seo实验室提供seo优化服务，有网站优化、网站建设、运营推广等需求请联系我们!
Copyright © 2001-2017 .seo实验室 版权所有 网站地图