1. 云栖社区>
  2. PHP教程>
  3. 正文

郑方方打怪升级日记 — 初识HTML5与CSS3

作者:用户 来源:互联网 时间:2017-12-01 17:26:18

升级方方

郑方方打怪升级日记 — 初识HTML5与CSS3 - 摘要: 本文讲的是郑方方打怪升级日记 — 初识HTML5与CSS3, 任务名称:响应式砸蛋页面 任务背景 前辈:方方啊,最近项目也没什么事情,你看这个砸蛋页面不是很好看,要不你做一个响应式砸蛋页面吧? 系统:郑方方接下前辈的任务 - 郑方方自动解析任务步骤 任务:响应式砸蛋页面 HTML5与CSS3入门

任务名称:响应式砸蛋页面

任务背景

前辈:方方啊,最近项目也没什么事情,你看这个砸蛋页面不是很好看,要不你做一个响应式砸蛋页面吧?

系统:郑方方接下前辈的任务 - 郑方方自动解析任务步骤

任务:响应式砸蛋页面

  • HTML5与CSS3入门 - 阅读《HTML5秘籍》(0/1)

  • 响应式布局(0/1)

  • 制作Canvas层(0/1)

  • 搭配Javascript(0/1)

  • 搭配PHP控制器 (0/1)

  • 完成任务(0/1)

人物背景介绍:郑方方

  1. 主职:小白PHP码畜;副职:Acer

  2. 技能:吃饭、睡觉

  3. 特征:单身狗

学习正文和代码

响应式布局 Begin

因为我不是前端,所以使用Bootstrap的visible-xshidden-xs,对于一些特殊的要求就是用 @media 来进行调节.
我使用的是不知道从哪里介绍的几种尺寸范围,如下:

  • @media (min-width: 970.1px) and (max-width: 1170px)

  • @media (min-width: 700.1px) and (max-width: 970px)

  • @media (min-width: 600px) and (max-width: 700px)

  • @media (min-width: 400px) and (max-width: 599.99px)

  • @media (max-width: 399.99px)

对于页面布局,我借助了 http://www.ibootstrap.cn/ 这个网站,之后再把代码下载下来自己进行修改.

Tip:垂直居中(主要是用于蛋一直在页面中间)

position: absolute;margin: auto;top: 0; left: 0; bottom: 0; right: 0;

响应式布局(1/1)Over

制作Canvas层 Begin

制作Canvas层时我把动画分为三个

  1. EggCanvas - 蛋(无其他CSS3效果)

  2. HammerCanvas - 锤子(animation、rotate):锤子砸下去后锤子会复位

  3. BoomCanvas - 爆炸特效(animation、transform、opacity):Ajax查询后爆炸变大并消失

Tip:为了让这些效果能兼容更多浏览器,我要这几个效果就会像下面代码,比如我的锤子效果

.AniHammer {animation: AniHammer 0.5s;-moz-animation: AniHammer 0.5s; /* Firefox */-webkit-animation: AniHammer 0.5s; /* Safari and Chrome */-o-animation: AniHammer 0.5s; /* Opera */}@keyframes AniHammer {/*25% {*//*transform: rotate(45deg);*//*}*/50% {transform: rotate(-135deg);}100% {transform: rotate(0deg);}}@-moz-keyframes AniHammer /* Firefox */{/*25% {*//*-moz-transform: rotate(45deg);*//*}*/50% {-moz-transform: rotate(-135deg);}100% {-moz-transform: rotate(0deg);}}@-webkit-keyframes AniHammer /* Safari and Chrome */{/*25% {*//*-webkit-transform: rotate(45deg);*//*}*/50% {-webkit-transform: rotate(-135deg);}100% {-webkit-transform: rotate(0deg);}}@-o-keyframes AniHammer /* Opera */{/*25% {*//*-o-transform: rotate(45deg);*//*}*/50% {-o-transform: rotate(-135deg);}100% {-o-transform: rotate(0deg);}}

这一段样式就是在0.5秒内,把动画效果分两步,第一步旋转到-135度,第二步就是旋转回0度.其中的-o-,-webkit-,-moz-就是为了兼容.

搭配Javascript Begin

我不知道刚接触的人会怎么想Javascript 和 CSS3 的关系,我最开始的时候还以为JS能控制CSS3的动画行为呢,现在我感觉JS只能通过控制元素的Class的attr( )或者removeclass( ),来完成我们想要的CSS3的一系列动画行为. (可能我现在还理解不够深,有谁理解的,麻烦给我科普科普)

移动端和PC端分别对应两个事件:Touch事件和Click事件,Touch事件如下:

var EggTouch = function (){console.log('Hi')};document.getElementById("LuckEgg").addEventListener('touchstart', EggTouch, false);

但是Canvas层产生的图片,了解过的人都知道需要用JS去生成图像

// 1.加载蛋的图片var EggCanvas = document.getElementById("LuckEgg");var EggContext = EggCanvas.getContext("2d");var EggImg = new Image();EggImg.src = "./egg.png";// 特别注意 - 要图片加载完才会出现图片EggImg.onload = function () {// 还要在这里判断屏幕大小 --- 用于确定生成的蛋的位置和大小EggContext.drawImage(EggImg, 30, 20, 240, 120);};

Tip:

  1. 每一次JS控制带有自动执行的动画效果的元素,使其display:block,就会自动执行动画效果;

  2. 使用setTimeout( )来完成某些效果,比如我的Boom效果爆炸持续时间是0.5秒,那么我就要在Boom后0.5秒再去执行其他函数.,这样就能得到我们想要的效果.

制作Canvas层(1/1)Over
搭配Javascript(1/1)Over

搭配PHP控制器 Begin

如果你们跟我一样同时使用了Touch和Click这两个事件,那么可能会出现在浏览器测试的时候,鼠标点击模拟手机状态下的touch行为,就会有两次POST传到后台,这就可能出现客户投诉说:我砸蛋砸了一次,怎么次数就没了.之类的话语.所以在后台我会用redis做一个很简单的锁,防止上面的情况的发生.

/** 防止touch 和 click 同时触发 */self::$lock .= $user['uid'];self::$luckValue = /Common/Common/MyRedis::getInstance()->get(self::$lock);if (self::$luckValue && time() - self::$luckValue <= 1) {exit;} else {/Common/Common/MyRedis::getInstance()->set(self::$lock, time(), 2);}

搭配PHP控制器 (1/1)

完成任务(1/1)

到此,任务也就做完了,其中一些比如什么字体大小,怎么查数据库,怎么控制JS的一些业务细节我就不多说了.
毕竟我也只是第一次写博客,文中有什么错误,或者思路有问题,还希望各位看客能指点指点.

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索升级 , 方方 ,以便于您获取更多的相关知识。