900字范文 > 生日快乐网站模板（个人制作）（HTML5+CSS3+JS）

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

时间：2019-06-28 20:10:42

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

下载地址

Github：/IcedSoul/tiny-heart

效果图

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

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

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

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

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

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

部分效果代码分析

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

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

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

<div class="button-style1"><a href="Memories.html" class="lk1"><div class="link1"><div class="bt1">我很喜欢</div></div></a> </div><div class="button-style2"><a class="lk2"><div class="link2"><div class="bt1">我不喜欢</div></div></a> </div>

.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.不过也懒得改了。具体看注释吧，没啥好说的。

<div class="section"><div class="ly-box01"><div 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></div><div 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></div></div></div>

这是点我很喜欢按钮跳转之后的第一页，对，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的过渡效果，比这个要简单的多，所以后面的代码就不粘了。

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