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

下载地址

Github：https://github.com/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的过渡效果，比这个要简单的多，所以后面的代码就不粘了。

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

下载问题

Github地址在上面放着，不会用Github下载东西的同学可以百度下，相信大多数都会的。

如果你觉得还可以请star & fork，感谢～

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

HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
HTML生日快乐代码 (粉色主题)（HTML5+CSS3+JS）520表白代码/七夕情人节网页/告白/求婚/生日快乐...
html+css+js 生日快乐网站模板(多页面功能版本+音乐)❤520/表白/七夕情人节/求婚❤专用炫酷动画网页的源代码(HTML5+CSS3+JS) 程序员爱情❤520/表白/七夕情人节/求婚❤专 ...
❤生日快乐网站模板HTML❤（精品制作）（HTML5+CSS3+JS）
生日快乐网站模板HTML(精品制作)(HTML5+CSS3+JS) 最近姐姐的生日快到了,想着也没有什么礼物送给她,恰好因为CTF的原因学了点HTML和JavaScript,就做了两个网页,当然因为网 ...
生日快乐网页模板（HTML5+CSS3+JS）
生日快乐模板 html+css+js 生日快乐网站模板(多页面功能版本+音乐) 给喜欢的人一个神秘的惊喜吧! 修改密码在当前目录下,有js/verification.js文件: //修改此处的roo ...
七夕静态页面html,html5+CSS3+JS实现七夕言情功能代码
因为今天8月28日就是中国的情人节-七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心:制作了h5+css+js界面祝小伙伴们:七夕快乐具体的功能有: 1.下雪的背景动画 2.下面的 ...
html网页特效微课,网页设计与制作(HTML5+CSS3+JavaScript)（第4版）（微课版）
网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版) 编辑锁定讨论上传视频 <网页设计与制作(HTML5+CSS3+JavaScript)(第4版)(微课版)& ...
HTML5,CSS3,js
HTML5,CSS3,js html5 html基本结构块级标签和行级标签 html5表格 html5表单 css3 css使用方法 css常用属性 css3的过渡和变换 css3的动画属性和多列属 ...
2023年最全前端面试题考点HTML5+CSS3+JS
合集:2023年最全前端面试题考点HTML5+CSS3+JS+Vue3+React18+八股文+手写+项目+笔试_参宿7的博客-CSDN博客本章内容为一面基础面为了简洁,相关文章参考链接在标题里 ...
利用HTML5+CSS3+JS实现简单的钟表
HTML5+CSS3+JS实现动态时钟利用HTML5+CSS3+JS实现简单的钟表,仅供参考学习效果图: 在线效果预览思路: 1. 先定义一个类名为timepiece的圆表表盘 HTML: &l ...
Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）
Web点餐系统(前端开发) 一.系统简介二.系统设计三.系统实现 · 首页(当天菜品)/推荐菜品/热买菜品 · 已选菜品 · 我的订单 · 订单统计四.总结五.源码下载一.系统简介该Web ...

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

下载地址

效果图

部分效果代码分析

下载问题

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

最新文章

热门文章