程序员方式原生表白网页

开发工具与关键技术：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标签包括住，插进自己想在哪张图片上显示出来的，先把文字隐藏，图片显示
代码如下：

设置表白文字：

设置点击事件：

点击一下网页按钮：

点击后的效果：

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

最后给个背景音乐：

网页一进来就自动播放：

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

程序员方式原生表白网页相关推荐

传说中的程序员最牛表白方式！
传说中的程序员最牛表白方式!
十个炫丽的表白模板源码，整合成一个完整系统可修改文字，可统计人数，经典的爱情告白，万能告白模板，胜过鲜花表白，程序员的特殊表白方式说——我爱你（520）——html、js、css、jQuery
十个炫丽的表白模板源码,整合成一个完整系统可修改文字,可统计人数,经典的爱情告白,万能告白模板,胜过鲜花表白,程序员的特殊表白方式说--我爱你(520)--html.js.css.jQuery. 一. ...
520程序员的浪漫表白
520程序员的浪漫表白说明预览 html部份代码说明本文作品创意不是我想出来的,只是想用推荐卡在这"520"的节日里给更多的人分享下好的作品,可以让新人程序员更加热爱现在做 ...
程序员七夕情人节表白代码
程序员七夕情人节表白代码 MainClass:com.wujinxi.ShowLove package com.wujinxi;import java.awt.*; import java.awt.d ...
python表白代码如何运行-程序员如何实现表白代码
程序员实现表白代码的方法:首先打开代码编辑器:然后输入告白代码[while (life < end) {love++;},var you = function from_future_impor ...
黑马程序员中的简单网页制作
前言黑马程序员中的简单网页制作代码如下(示例): <!DOCTYPE html> <html lang="en"><head><met ...
程序员眼中看到的网页是如何制作出来的？
一.认识网页在学习之初,我们需要认识一下网页的概念,因为网页与我们的 html是息息相关的. 那么接下来我们来看一下,我们经常去通过浏览器查看的网页,它的本质是什么?在此我们需要去做一个对比.我们眼 ...
HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
封面你来定，给《新程序员·云原生和全面数字化时代》选封面啦
亲爱的开发者朋友们, 经过数月以来紧张的筹备,<新程序员·云原生和全面数字化时代>即将和大家见面.从主题名可见,这一期内容将聚焦在云原生和数字化,以「云原生时代的开发者」和「全面数字化转型 ...
［java］程序员的爱情表白
程序员的爱情表白: 我能抽象出整个世界．．．但是我不能抽象出你．．．因为你在我心中是那么的具体．．．所以我的世界并不完整．．．我可以重载甚至覆盖这个世界里的任何一种方法．．．但是我却不能重载 ...

程序员方式原生表白网页

原生表白网页

程序员方式原生表白网页相关推荐

最新文章

热门文章