由于本次页面使用的图片涉及个人隐私，已经打码处理。

信息量不小，大家慢慢食用(滑稽.png)

<!-- 制作人：Mr.J联系方式：2538808265(QQ)blog:   https://blog.csdn.net/Ms_yjk时间：  2019年6月18日19点57分参数:心跳：5.21s文字跳动 4.1s图片墙高度：521照片墙时间：4.1s轮播图：82ms-->

页面布局

当点击按钮时，进行动画的演示：

上图的心形动态进行跳动（之前写过）：Mr.J--心形跳动demo

页面模块

文字模块

这里就用一个文字进行demo的示例：

h1 span {float: left;position: relative;color:rgba(32, 19, 26);
}h1 span:nth-child(1) {-webkit-animation: jump 4.1s linear 0s infinite alternate;
}

文字的模块部分，颜色改变跳动效果实现（8种颜色）：

@-webkit-keyframes jump {0% {top: 0px;color:rgba(0, 255, 200, 0.794);}14.28%{top: -10px;color:rgba(0, 255, 64, 0.829);}28.57% {top: 10px;color: rgba(60, 255, 0, 0.931);}42.85% {top: -10px;color: rgba(255, 230, 0, 0.897);}57.14% {top: 10px;color: rgba(255, 179, 0, 0.876);}71.42% {top: -10px;color: rgba(255, 154, 3, 0.918);}85.71% {top: 10px;color: rgba(243, 84, 16, 0.904);}100% {top: -10px;color: rgba(255, 69, 43);}}

花模块

这个部分只是进行了一个康乃馨图片的插入，突发奇想。图片插入没什么写的：

照片墙模块

个人设置了15张图片：

CSS调整数据进行照片的布局：

#imgWrap {width: 800px;height: 521px;margin: 0px auto;perspective: 800px;}#imgWrap img {float: left;width: 150px;height: 200px;border-radius: 2%;
}

照片墙思路：

1、闪动的效果（瞬间让图片的宽高变为0，scale，随机）

2、图片从小变到大，同时透明度也有变化（必需是上一个运动走完了，才走这一步）

3、图片旋转，同时透明度也有变化（当所有图片透明度变为0的时候，才会走这一步）

demo以及讲解（看我上一篇博客）：Mr.J-- 图片墙动画效果

轮播图模块

$(function () {// 0.定义变量保存偏移位var offset = 0;// 1.让图片滚动起来var timer;function autoPlay(){timer = setInterval(function () {offset += -10;if(offset <= -1200){offset = 0;}$("ul").css("marginLeft", offset);}, 82);}autoPlay();// 2.监听li的移入和移出事件$("li").hover(function () {// 停止滚动clearInterval(timer);// 给非当前选中添加蒙版$(this).siblings().fadeTo(100, 0.5);// 去除当前选中的蒙版$(this).fadeTo(100, 1);}, function () {// 继续滚动autoPlay();// 去除所有的蒙版$("li").fadeTo(100, 1);});});

? 模块

见我博客：Mr.J--心形跳动demo

按钮


#btn {width: 150px;background: rgba(212, 66, 8, 0.829);padding: 0 20px;font: 16px/40px "Ink";color: #fff;margin: 0 auto;border-radius: 5px;box-shadow: 2px 2px 5px #000;cursor: pointer;
}

总结

页面不是很炫，只是一些普通元素的拼接，以及自己不是很好的页面布局。

本人学习jQuery专栏：

Mr.J-- 简单生日页面制作相关推荐

html简单登录页面制作
html简单登录页面制作 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
java生日贺卡,简单生日贺卡制作，涨知识了
小朋友同学生日,一起做张贺卡来表示心意. 工具/材料不同颜色彩纸(A4彩纸需要两张,其他可以是小的) 剪刀或者裁纸刀溶胶枪或者固体胶铅笔尺子一张A4卡纸操作方法 01 先拿一张小的折纸或者 ...
HTML+CSS静态页面游戏网站设计——腾讯游戏(页)学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作
HTML5期末大作业:游戏网站设计--腾讯游戏(页)学生HTML个人网页作业作品下载个人网页设计制作大学生个人网站作业模板简单个人网页制作常见网页设计作业题材有个人. 美食. 公司. 学校. ...
学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)~大学生个人网站作业模板~HTML简单个人网页制作
HTML期末大作业~ 学生HTML个人网页作业作品下载-个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
H5页面制作简单上手工具对比
以下-用了大概五天做一份H5+间接性听歌入魔,简单对比以下制作工具iH5和Epub360的使用心得: 1.界面美观来看,个人认为iH5逼格更高一点-派有些孩子气(??) 2.模板来说,iH5的模板更好 ...
学生HTML个人网页作业作品~个人主页博客网页设计制作(6个页面)~大学生个人网站作业模板~HTML简单个人网页制作...
HTML期末大作业~ 学生HTML个人网页作业作品下载-个人主页博客网页设计制作大学生个人网站作业模板简单个人网页制作临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTM ...
HTML制作简单的页面
一.HTML页面制作代码部分 <html><head><meta charset="utf-8"><title>Music Logi ...
第3期：12306页面制作
12306页面制作第1期: 手把手教你制作网易邮箱注册页面第2期: 网页动画制作(CSS+JS) 第3期:12306页面制作文章目录 12306页面制作前言一.基础知识 1.JS基础语法 2 ...
第三章 “我要点爆”微信小程序云开发之点爆方式页面和爆炸之音页面制作
点爆方式选择页面制作在app.json中配置页面路径增加selectbao点爆方式选择,编译创建页面文件,点爆方式选择页面通过单选按钮组选择跳转到相应的点爆页面. <view class=&q ...

Mr.J-- 简单生日页面制作