程序员方式原生表白网页

开发工具与关键技术：DW-Css3-Javascript
作者：Mr_恺
撰写时间：2019.01.19

原生表白网页

在日常的生活中，我们男生是不是都有一个心目中的女神或者喜欢的女孩呢？
因为怕给拒绝或者胆小，而只能偷偷的暗恋，关注她的一举一动，且不敢对她表白，现在用我们程序员的方法教你大胆的表白：

先给一个包括全部内容yinzang的div盒子，里面放h1标签和放一个类名为contentde 的ul无序列表，放图片进去并它们一个类名方便后面设置：

要采用 Flex 布局,就是我们说的**”弹性布局”,用少的代码实现一样的效果，把图片排列好在这里只用Flex 布局两个属性就行了，一个flex-flow属性和justify-content属性。
flex-flow属性有三个值：
nowrap：不换行（默认），
wrap：换行，第一行在上方，
warp-reverse：换行，第一行在下方
justify-content属性有五个值，对齐方式与轴的方向有关：
flex-start：（默认）左对齐，
flex-end：右对齐，
center:居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等

效果如下：

想页面加载进来看见的是“爱的宣告”，然后通过一个css3效果再把图片显示出来：
先把全部图片设置一个opacity: 0;然后用span标签包住文字放进li标签，并给它一个id命名和设置样式，下面截图是一部分，就按这样样式设置下面的：

把文字进行定位，让你的那个她看见美观一点：

页面加载进来的效果如下：

设置css3动画和调用，把动画效果时间延迟触发，当第一个动画结束，第二个动画就立刻触发，按次一直下去，
并用到计时器，用到计时器的作用是：当开始以旋转动画效果把图片显示时，对应上的文字立刻隐藏起来，
注意：
1. 计时器设置文字隐藏起来时间=动画效果时间延迟触发。
2. 动画完成时间=下一个动画效果时间延迟触发。

获取对应的span标签的id名，并设置计时器：只截小部分的图，按此设置下去就ojbk

效果如下：

然后搞一个“照片相册滚动”，css3就一个标签实现：

Css3中的marquee标签，其实我这个标签也是无意在W3School离线手册看到的，现在用的都是它的默认属性，就能实现我要的效果。
重要属性：
1.滚动方向direction（包括4个值：up、 down、 left和 right）
2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）
3.滚动速度scrollamount（滚动速度是设置每次滚动时移动的长度，以像素为单位）
4.滚动延迟scrolldelay（设置滚动的时间间隔，单位是毫秒）
5.滚动循环loop（默认值是-1，滚动会不断的循环下去）
6.滚动范围width、height
7.滚动背景颜色bgcolor
效果如下：

图片从左向右过来，滚动会不断的循环下去

在搞一个惊喜的效果，把自己想和她表白的话，通过一个按钮点击一下，中间图片消失就突然在消失地方把自己想和她表白的话显示出来， 并又设置一个计时器，在1分钟后又把图片显示回来。
设置一个按钮和样式：


再设置把自己想和她表白的话用li标签包括住，插进自己想在哪张图片上显示出来的，先把文字隐藏，图片显示
代码如下：

设置表白文字：

设置点击事件：

点击一下网页按钮：

点击后的效果：

一分钟后，文字消失，因为上面设置了动画效果时间延迟触发，图片不能立刻恢复，以动画效果恢复
开始恢复效果：

最后给个背景音乐：


网页一进来就自动播放：

文档很难表达出动画效果，想看全网页和源码请留言，新手上门，希望你们喜欢