Html5
Html5 前端技术学习
PandaCode辉
80后辉哥,普通程序员一枚,希望通过持续学习编程技术,能不断提升自我,突破自我局限性。
展开
-
网页设计--分拆页面头中尾3部分再组合完整,方便中间主要内容区更换
自学网页开发遇到的问题,像网页一般头部或者顶部有菜单栏或者中间左右有菜单栏选项,底部有版权所有之类的固定内容,基本上每个菜单选项后的页面都有固定的头尾部分或者左右菜单保持不变,只是选择菜单后希望主要内容区块变换相应的内容,查找资料学习后发现这种分拆网页然后组合的模块的方式比较好用,可以提取固定的模块页面部分为一个独立的页面,然后组合到一个网页,显示出网页整体效果。下面是我做的网页的首页原创 2016-11-11 20:25:31 · 1390 阅读 · 0 评论 -
纯CSS手里剑绘制优化1
之前做的--纯CSS3手里剑模型动画绘制--太差劲了,重新学习了下各种几何图形的基础后优化了一下。截图:代码:纯CSS手里剑绘制优化1.box {width: 400px;height: 400px;margin: 100px auto;position: relative;background-color: #CFC原创 2016-12-19 22:34:21 · 483 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-11-CSS3之3D转换的用法
今天学习了一下CSS3之3D转换的用法。代码:CSS3之3D转换练习div {width: 200px;height: 200px;background-color: #090;margin: 50px auto;}/*1、rotateX():围绕其在一个给定度数X轴旋转的元素*//*div:hover {transfor原创 2016-12-27 20:59:38 · 433 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-13-CSS3多列
今天学了CSS3多列的用法,文字内容也可以分列显示。截图:代码:CSS3多列/*column-count 属性指定了需要分割的列数; column-gap 属性指定了列与列间的间隙; column-rule-style 属性指定了列与列间的边框样式; column-rule-width 属性指定了两列的边框厚度;原创 2017-01-06 21:41:48 · 339 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-13-CSS3之box-sizing
CSS3 box-sizing 属性在一个元素的 width 和 height 中包含 padding(内边距) 和 border(边框)。代码:CSS3框大小/*CSS3 box-sizing 属性在一个元素的 width * 和 height 中包含 padding(内边距) 和 border(边框)。*/* { box-sizin原创 2017-01-06 21:44:39 · 318 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-13-CSS3过渡和CSS3动画
学习了CSS3过渡和CSS3动画2个类似的功能截图:CSS3过渡,旋转45度同时缩小3/4长宽代码:CSS3过渡/* 为了添加某种效果可以从一种样式转变到另一个的时候, 无需使用Flash动画或JavaScript。用鼠标移过下面的元素: 要实现这一点,必须规定两项内容:指定要添加效果的CSS属性指定效果的持续原创 2017-01-06 21:52:09 · 414 阅读 · 0 评论 -
纯CSS手里剑绘制练习优化2
今天继续优化css3代码,使用伪类选择器和伪对象选择器精简了很多代码。截图:代码案例:纯CSS手里剑绘制练习优化2.box {width: 400px;height: 400px;margin: 100px auto;position: relative;background-color: #FFF;transfo原创 2016-12-20 21:28:48 · 610 阅读 · 0 评论 -
HTML5-转盘抽奖功能
今天学习制作了转盘抽奖功能的页面截图:代码:转盘抽奖功能$(document).ready(function(e) {$("#content img").click(function(e) {var num = Math.floor(Math.random() * 3600); //求得随机的旋转度数$("#zhuan原创 2017-01-13 21:42:09 · 8027 阅读 · 3 评论 -
HTML5-内联 SVG
HTML5-内联 SVG//SVG 指可伸缩矢量图形 (Scalable Vector Graphics)//SVG 用于定义用于网络的基于矢量的图形//SVG 使用 XML 格式定义图形//SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失//SVG 是万维网联盟的标准//与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于://SVG原创 2017-01-13 21:45:13 · 334 阅读 · 0 评论 -
3D图片展示效果练习
今天学着做了一个3D图片展示的动态效果。截图:初始状态:变换中状态:结束状态:代码:iphone3D图片展示效果练习/*背景3D舞台*/#background { position: absolute; top: 0; left: 0; width: 100%; height: 100原创 2017-01-09 22:39:21 · 809 阅读 · 0 评论 -
HTML5-SVG练习
今天练习了多个SVG绘制图形模型截图:代码:HTML5-SVG练习//SVG 指可伸缩矢量图形 (Scalable Vector Graphics)//SVG 用于定义用于网络的基于矢量的图形//SVG 使用 XML 格式定义图形//SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失//SVG 是万维网联盟的标准//与其原创 2017-01-14 22:05:57 · 721 阅读 · 0 评论 -
使用SVG绘制转盘图形加上转盘抽奖功能
使用SVG来绘制转盘的图形,可以定制任何样式的转盘和抽奖描述,减少外部图片的添加。结合抽奖功能。截图:代码:SVG绘制转盘图形$(document).ready(function(e) {$("#content #pointer svg").click(function(e) {var num = Math.floor原创 2017-01-15 12:24:57 · 1751 阅读 · 0 评论 -
HTML5新的表单元素
HTML5新的表单元素 私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)-->原创 2017-01-10 22:27:11 · 322 阅读 · 0 评论 -
HTML5-Canvas绘图练习1
今天学到了另一个通过代码绘图的知识点,Canvas截图:代码:HTML5-Canvas绘图//HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成.// 标签只是图形容器,您必须使用脚本来绘制图形。//你可以通过多种方法使用Canva绘制路径,盒、圆、字符以及添加图像。//用原生的j原创 2017-01-15 21:37:58 · 697 阅读 · 0 评论 -
使用Canvas绘图大转盘抽奖功能
换个方式绘制转盘图,抽奖截图:代码:Canvas绘图大转盘抽奖功能//用原生的js的时候我们通常用onloadwindow.onload = function() {//访问ID对象myCanvasvar c = document.getElementById("item");var ctx = c.getCont原创 2017-01-17 20:46:09 · 1740 阅读 · 0 评论 -
使用CSS3绘制转盘图抽奖功能
再换一个绘图方式,使用CSS3绘制转盘图抽奖功能截图:代码:使用CSS3绘制转盘图抽奖功能//页面加载执行事件,常用window.onload = function() {//document.getElementById("pointer"):访问ID对象,onclick 点击事件document.getElem原创 2017-01-17 22:17:31 · 3248 阅读 · 0 评论 -
打开盒子3D效果
打开盒子3D效果#content{width: 300px;height: 300px;margin: 100px auto;position: relative;}#face1,#face2{width: 300px;height: 300px;background: url(images/musicb.jpg) no-repeat;positio原创 2017-02-12 19:45:38 · 586 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-10-CSS3之2D转换的用法
今天学习了一下CSS3之2D转换的用法。代码:CSS3之2D转换/*1、转换-移动 *//*div{width: 200px;height: 200px;background-color: #090;position: absolute;left: 50%;top: 50%;transform: translate(-50%,原创 2016-12-26 21:28:09 · 411 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-9-制作iphone手机模型
庆祝圣诞节,使用HTML5+CSS3+JS制作iphone手机模型,并添加圣诞祝福语,类似开机动画效果!截图: 代码:iphone手机模型$(document).ready(function() {$("#btn").click(function() {//$(selector).html(content) 改变被选原创 2016-12-25 11:12:52 · 1845 阅读 · 0 评论 -
CSS3绘制各种几何图形练习
学习用CSS3绘制各种图形。截图: 代码:CSS3绘制各种几何图形练习/*圆形*/#circle {width: 120px;height: 120px;background: #7fee1d;-moz-border-radius: 6转载 2016-12-18 21:46:51 · 944 阅读 · 0 评论 -
使用CSS3实现一个3D相册
今天学到一个不错的图片展示效果,记录下来。截图:代码:使用CSS3实现一个3D相册/*大容器*/.my-container {width: 800px;height: 500px;margin: 20px auto;}/*舞台perspective属性用来激活一个3D空间,使其子元素都会获得透视效果转载 2016-12-04 12:29:43 · 2707 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-1
Html5新增练习1header,nav,section,footer{width:400px;height:40px;border:solid 1px #333333;margin-bottom:10px;margin:10px auto;}aside,article{width:150px;height:35px;border:s原创 2016-12-03 20:25:51 · 408 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-2
圆角矩形练习div{width:200px;height:200px;border:#666666 solid 1px;margin: 20px;float: left;}#c1{border-radius:20px;/*4个角半径都是20px*/}#c2{border-radius:20px 40px;/*第一个是上下,第二个是左右*/}原创 2016-12-06 21:50:37 · 307 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-3
之前学习了使用CSS3实现一个3D相册,今天突然想到,既然可以水平旋转,为啥不能垂直旋转呢!于是我试着改变几个参数,3D相册的效果就变形了。垂直旋转截图:代码:使用CSS3实现垂直旋转3D相册/*大容器*/.my-container {width: 500px;height: 500px;margin: 20px auto;}原创 2016-12-06 22:23:55 · 456 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-4
今天学习了3个东西:CSS属性选择器练习,CSS伪类选择器,CSS伪对象选择器样例代码如下:-------------------------------------------------------------------------------------------------------------------------------CSS属性选择器练习原创 2016-12-07 21:31:40 · 384 阅读 · 1 评论 -
HTML5+CSS3+JS学习笔记-5
今天学习了一下音频和视频标签的简单应用。音频视频练习不支持音频格式原创 2016-12-15 21:35:08 · 309 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-6
今天学习了一个圆角变形的案例,css3中的一点东西。----------效果截图--------------------代码案例----------圆角变形练习#box {width: 200px;height: 200px;/*-webkit-border-radius:苹果;谷歌,等一些浏览器认,因为他们都用的是webkit内核;原创 2016-12-16 21:52:56 · 282 阅读 · 0 评论 -
纯CSS3绘制的小猫笑脸动画
今天学习圆角变形网上搜索的时候看到一个有趣的东西,挺不错的类动画效果,学习了一下,并加以改变。---------------效果截图--------------------------------代码案例-----------------纯CSS3绘制的小猫笑脸动画DEMO演示-->body { marg转载 2016-12-16 22:01:33 · 1416 阅读 · 0 评论 -
CSS3颜色渐变练习
今天学习了一下CSS3多种颜色渐变案例。截图:代码:CSS3颜色渐变练习#box ul {list-style-type: none;padding: 0px;height: auto;width: 1000px;margin-right: auto;margin-left: auto;}#box ul l原创 2016-12-21 21:01:26 · 1390 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-7-JS调节背景色
今天学习了使用JS调节背景色。结合HTML5的 input标签中的 range 类型。截图: 代码:JS调节背景色//当页面准备完毕的时候$(document).ready(function(e) { $('input').change(function(e){var red=$('#red').原创 2016-12-22 22:12:27 · 538 阅读 · 0 评论 -
纯CSS3手里剑模型动画绘制
根据 纯CSS3绘制的小猫笑脸动画 和 使用CSS3实现一个3D相册 2个案例 绘制的自动旋转的手里剑模型。-------------------效果截图-------------------------------------代码案例------------------纯CSS3手里剑模型绘制#box {height: 400px;原创 2016-12-17 22:19:13 · 898 阅读 · 0 评论 -
鼠标移到图片放大效果
鼠标移到图片放大效果div{width: 120px;height: 120px;border: solid 1px #666;margin: 100px auto;overflow: hidden;/*隐藏超过边界的*/}/*图片过渡变化*/div img{transition: all 0.5s;cursor: pointer;}/*鼠标原创 2017-01-03 21:21:26 · 641 阅读 · 0 评论 -
3D转换加上透视效果
CSS3的3D转换加上透视效果。截图:代码:3D转换练习div{width: 120px;height: 120px;border: solid 1px #000;margin: 50px auto;perspective: 400px;/*透视的效果,必须给父元素加*/}/*图片3D变化*/div:hover i原创 2017-01-03 21:26:23 · 399 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-12-使用JS及函数来制作表格加上3D透视效果
把之前用JS制作的表格加上3D透视效果截图:代码:使用JS函数来制作表格练习$(document).ready(function(e){//1、向body页面内添加一个div,id命名为world$("body").append('');//2、在div内追加1个table,边框为1px,填充间距都是0$("#world").原创 2017-01-03 21:32:20 · 583 阅读 · 0 评论 -
HTML5+CSS3+JS学习笔记-8-使用JS及函数来制作表格
今天学习了一些javascript知识,不写一个页面标签,利用函数制作表格截图:代码:使用JS函数来制作表格练习$(document).ready(function(e){//1、向body页面内添加一个div,id命名为world$("body").append('');//2、在div内追加1个table,边框为1px,填充间原创 2016-12-24 21:35:17 · 1209 阅读 · 0 评论 -
CSS3三角形绘制原理解析
今天认真学习了下三角形制作的原理。截图: 代码:CSS3三角形绘制原理#test1 {width: 100px;height: 100px;border:4px solid blue;}#test2 {width: 100px;height: 100px;border:20px s转载 2016-12-18 21:38:20 · 458 阅读 · 0 评论 -
HTML5-模拟钟表时间
自己设计模拟的钟表时间日期。使用HTML5+CSS3+JS,SVG绘图。截图:代码:模拟钟表时间window.onload = function() {//显示当前时间var myVar = setInterval(function() {myTimer()}, 1000);//时间函数function myT原创 2017-03-01 21:32:30 · 1849 阅读 · 0 评论