HTML5
从入门到放弃之HTML5,也算是前端入门了。书本参考《HTML5基础知识、核心技术与前沿案例》。
学而不思则忘
一切都可以
展开
-
渐变色绘制
用CSS来实现颜色的渐变:<a href="">BUTTON</a>一、线性渐变:接下来,对a元素进行样式修改,并选取两种颜色来作为渐变的起点和终点: a{ display: inline-block; font-size: 2em; border-radius: 0.3em; text-dec...原创 2019-09-17 19:27:43 · 509 阅读 · 0 评论 -
加载动画效果——更复杂
最后,这里将制作一个更加复杂的动画:有八个白点组成,分别位于八个方位,然后八个白点依次放大和缩小。制作关键是做好每一个白点的动画和他们之间的连贯性。首先,根据前面学到的 box-shadow 属性,我们先创建八个白点的动画: body{ background: #4ea980; margin: 200px; } .loader{ ...原创 2019-09-13 13:34:13 · 265 阅读 · 0 评论 -
加载动画效果——复杂
前面两篇的动画效果只设计了第一帧和最后一帧,这次,我将学习更加复杂的动画效果前面代码一样,这里只贴出CSS样式代码: .loader { font-size: 20px; width: 1em; height: 1em; border-radius: 50%; position: relative; ...原创 2019-09-12 20:49:11 · 226 阅读 · 0 评论 -
加载动画效果——渐变
接着上一篇简单的加载动画,我们来实现渐变效果的加载动画: .loader{ text-indent: -9999em; /*隐藏文字*/ position: relative; width: 200px; height: 200px; border-radius: 50%; /*使形状轮廓为圆形*/ ...原创 2019-09-12 20:01:56 · 631 阅读 · 0 评论 -
加载动画效果——简单动画
在此,将记录几个我学习加载动画的案例。先设计一个圆圈: <div class="loader">Loader...</div> body{ background: #4ea980; } .loader{ text-indent: -9999em; /*隐藏文字*/ position: relat...原创 2019-09-12 17:17:15 · 459 阅读 · 0 评论 -
两个页面之间动画的切换效果——平移、缩放、旋转等
一下面的html代码为例: <body> <article id="tablet"> <img src="tablet.png" alt="tablet"> <h1>Comprehensam</h1> <p>Mel homero l...原创 2019-09-11 19:29:50 · 13199 阅读 · 6 评论 -
多个图标的动画效果(动画的衔接)
前面是一个图标的动画,这篇试一试多个图标的动画:先创建四个图标,<span class="home icon">Home</span><span class="search icon">Search</span><span class="user icon">User</span><span class="ma...原创 2019-09-10 20:33:53 · 1085 阅读 · 0 评论 -
图标元素动画效果
这次,使用另外一种动画的画法:animation。还是,准备一个元素作为图标的载体,并进行以下设置:<span class="close">Close</span>然后,把close隐藏,增加一个圆形按钮:<style> @font-face { font-family: 'icon-font'; src: url('font/flat-u...原创 2019-09-10 18:58:15 · 843 阅读 · 0 评论 -
按钮元素的动画效果
<a href="">This is a link</a>以上面的代码为例,我们来一步步的制作这个按钮的动画:先把标签里的 a 得颜色,字体样式等基础设置一下。然后设置鼠标悬浮在 a 上面时让其显示颜色。 a{ color: #e7cfcf; background: #af2c2c; text-decorati...原创 2019-09-08 21:20:58 · 1518 阅读 · 0 评论 -
逐帧动画效果——简单篇
当我们制作一些通过属性变化无法实现的动画效果时,就需要使用逐帧动画。现在lllustrator 矢量图绘图软件中绘制好跑步动作的每一个环节(这里我借鉴书上的图):这里图像的每一帧内容都是 300x372像素的宽高。可以发现这张图片的像素是 3600x372像素,所以一共有十二帧。在网页中引入此图片:<div class="run"></div> .r...原创 2019-09-13 15:50:55 · 3038 阅读 · 0 评论 -
逐帧动画效果——复杂点
除了前面《简单篇》中的背景位置切换方式外,我们也可以用多张图片呈现的方式制作逐帧动画。首先,将每一帧动画单独保存为一个文件,这样就有了十二张图片。我们要做的就是让这十二张图片动起来。先准备十二个div元素,每个元素放置一张图片:<div class="run"> <div id="frame1" class="run-pic"></div> ...原创 2019-09-13 16:12:40 · 537 阅读 · 0 评论 -
三角图标绘制
先设计一段html代码,以此来做示例:<article> <h1>Lorem ipsum</h1> <p>Ne maluisset sententiae qui, mucius epicuri reprimique et cum, sumo saperet laboramus et pri. An ign...原创 2019-09-17 16:07:30 · 314 阅读 · 0 评论 -
菜单按钮绘制
首先,使用一个a元素来作为DOM容器:<a href="">Menu</a>对a元素做一些样式设置: a{ text-decoration: none; color: #999; text-indent: 1.2em; /*使文字右移1.2个字符大小,为图标腾出空间*/ font-size: 3...原创 2019-09-17 13:44:48 · 339 阅读 · 0 评论 -
关闭按钮绘制
关闭按钮可以用Photoshop画,然后存为图片。但在这里,尝试用CSS来绘制这个形状,它的优点在于效果美观,便于定制和修改,且具有矢量缩放能力。先定义一个容器:<span class="close">Close Me</span>然后,设置两个伪元素,每个伪元素都是一条线,为了区分,加上白色和红色。 body{ ...原创 2019-09-16 20:01:28 · 632 阅读 · 0 评论 -
GSAP动画效果三——3D动画
这次多设计几个盒子,来制作3D动画。 <body> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box">&...原创 2019-09-15 21:32:18 · 1045 阅读 · 0 评论 -
GSAP动画效果二
使用GSAP简单的绘制一个线条变化的盒子:<div id="box"></div>设置CSS样式,显示盒子: <style type="text/css"> html, body{ height: 100%; } body{ ...原创 2019-09-15 21:16:48 · 716 阅读 · 0 评论 -
GSAP动画效果一
GSAP是第三方动画引擎类库,用GSAP来制作一些动画。先插入一个飞机照片:<img src="shuttle.png" id="shuttle">对其与页面先进行设置:飞机图片定位到下边中间。 html, body{ height: 100%; } body{ background: #363434b6; margin: 0%; ...原创 2019-09-15 19:59:45 · 4121 阅读 · 0 评论 -
JavaScript动画特效——Canvas粒子动画
这次,将制作飘雪的效果,如果用CSS动画样式来做的话,可以想象,那是有多么难。所以就用JavaScript来制作。Canvas官方教程,很详细:http://canvas.migong.org/category/canvas-animation要使用Canvas,则需要在HTML中插入相应的DOM结构:<canvas id="myCanvas" width="1000" height=...原创 2019-09-15 15:28:07 · 2113 阅读 · 0 评论 -
3D翻页动画效果
之前,已经使用了 transform 和transition 相结合来制作3D动画效果,下面我们用新的方法来制作3D翻页效果。<ul class="book"> <li class="cover">第一页</li> <li class="page1">第二页</li> <li class="page2"&g...原创 2019-09-14 15:25:01 · 1856 阅读 · 0 评论 -
瀑布流布局
<body> <div id="container"> <div class="col"> <div class="pic"> <img src="images/1.jpg"> <p>In sagittis sit ...原创 2019-09-08 21:21:17 · 379 阅读 · 0 评论 -
两列自适应布局
<body> <div class="row"> <div class="side"> <img src="side.png" alt="order"> <p>In restaurants, pizza can be baked...原创 2019-09-08 21:21:26 · 623 阅读 · 0 评论 -
格子布局入门
以下列代码为例:<section> <article> <h1>Ulysses</h1> <p>Soaring through the galaxies.</p> <img src="pic1.png" alt="image of Ulysses"> ...原创 2019-09-08 21:21:35 · 1151 阅读 · 0 评论 -
Flex:轻松实现弹性布局
接着上一篇的百分比布局,用上一篇中的HTML5代码继续学习。现在修改CSS代码:body{ background: #f3f2ef; font-family: sans-serif; display: -webkit-flex; /* webkti内核浏览器的兼容写法 */ display: flex; ...原创 2019-09-08 21:22:33 · 248 阅读 · 0 评论 -
HTML5——表格
详细看下面文章:https://www.w3school.com.cn/html/html_tables.asphttps://www.w3school.com.cn/tags/tag_table.asp<table> <thead> <tr> <th>姓名</th> ...原创 2019-09-08 21:22:46 · 1820 阅读 · 0 评论 -
HTML5——表单
一、创建一个简单的表单<form method="post" action="server.php"> <p><label>姓名:<input name="username" type="text" placeholder="请输入您的姓名"></label></p></form>显示效果:me...原创 2019-08-04 09:06:41 · 276 阅读 · 0 评论 -
在移动端访问电脑上写好的HTML页面
在学习HTML时,常常需要在手机上观看电脑上写好的HTML页面,在网上收到了很多方法,我找到了一种操作简单的办法:一、确保在电脑上安装了 Node.js。既然是学习前端,这个软件相信都有,按网上说的方法安装即可。二、打开cmd窗口,使用npm来安装服务在命令行下直接输入下面代码:npm install http-server -g这里我们是全局安装 http-server 服务。三...原创 2019-08-03 11:57:13 · 1894 阅读 · 1 评论 -
HTML5——常用文本
HTML5常用文本知识:1、a 元素说明:< a > 元素(或称锚元素)可以创建通向其他网页、文件、同一页面内的位置、电子邮件地址或任何其他 URL 的超链接。官方文档:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a2、em ,strong 元素em 多代表语义、语气的加强。默认显示为斜体。stron...原创 2019-06-30 16:45:20 · 890 阅读 · 0 评论 -
HTML5——head标签
head 标签作用:HTML head 元素 规定文档相关的配置信息(元数据),包括文档的标题,引用的文档样式和脚本等。head 标签中放的元素1、title网页的标题,title将会被显示在浏览器的标题栏,或用户收藏夹等醒目位置。2、link规定了外部资源与当前文档的关系。这个元素最常于链接样式表,还能被用来创建站点图标(比如PC端的“favicon”图标和移动设备上用以显示在主屏幕...原创 2019-06-30 16:12:59 · 955 阅读 · 0 评论 -
HTML5——分组元素
一、分组元素汇总二、分组元素解析1 、< p > 建立段落2、< div >通用分组由于div自身不带有任何意义,在HTML5强烈要求语义化的大背景下,div作为一种最后的解决方案使用。3、< li >定义列表中的一个列表项属性如下:value:这个整数型属性表明了本 < li > 元素在有序列表 (由 < ol >...原创 2019-06-30 15:49:08 · 1851 阅读 · 0 评论 -
HTML5——meta标签总结
< meta >标签属性总结:< meta > 元素必须包含在 < head > 元素中并且在HTML代码的前1024个字节内,因为某些浏览器在选择编码之前只查看前面这些字节。1、charset属性:此属性声明当前文档所使用的字符编码,鼓励使用 UTF-8;但该声明可以被任何一个元素的 lang 特性的值覆盖。2、 name属性:name属性主要...原创 2019-06-30 15:05:32 · 5326 阅读 · 0 评论 -
雪碧图的应用
以下面的这段代码为例,来为它添加雪碧图:<ul> <li>Weather</li> <li>Feature</li> <li>Phone</li> <li>Notebook</li></ul> *{ margin: ...原创 2019-09-08 21:22:28 · 327 阅读 · 0 评论 -
Media Query——适配分辨率
一、在HTML中设置media quary.<link href="css.css" rel="stylesheet" media="screen and (max-width: 600px)">HTML中的 < link > 标签,用于在页面中导入CSS文件。media 属性:screen 代表媒体的类型为电脑或移动终端显示屏幕(还有all 代表所有媒体、prin...原创 2019-08-23 11:08:18 · 635 阅读 · 0 评论 -
两列均分排列
一下面代码为例:<section> <article> <h1>Rip Van winkle</h1> <p>Many years ago, at the foothills of the ....kind neighbour, ready to help anyone. </p> ...原创 2019-09-08 21:21:49 · 319 阅读 · 0 评论 -
图标题文混排
以下面的HTML代码为例:<div class="description"> <img src="comment.png" alt="comment"> <h1>Lioness of Gir</h1> <p>Monkeys swing merrily from tree to tree. .....the kin...原创 2019-09-08 21:21:59 · 333 阅读 · 0 评论 -
jQuery动态效果
以下面的这个盒子为例,我设置了它在页面中居中显示,方便观看:<div id="box"></div><script src="jquery-3.4.1.min.js"></script><style> #box{ background: #18af75; height: 300px; ...原创 2019-08-29 20:13:32 · 492 阅读 · 0 评论 -
HTML+CSS,设置<div> 在屏幕居中
以下面的代码为例:<div id="box"></div>方法一:div 使用绝对布局,设置margin:auto;并设置top、left、right、bottom的值相等即可。<style> #box{ background: #18af75; height: 300px; width: 300...原创 2019-08-29 19:41:51 · 2373 阅读 · 0 评论 -
jQuery属性操作
只是积累了一点点!!以下面的html页面为例:<h1 class="white big">Title</h1><h1 class="white small">Sub Title</h1><script src="jquery-3.4.1.min.js"></script>动态设置某个标签的外观样式:1、先定义一个...原创 2019-08-29 19:21:48 · 144 阅读 · 0 评论 -
开源类库jQuery选择器
在下面的代码中:<h1 class="white big">Title</h1><h1 class="white small">Sub Title</h1><script src="jquery-3.4.1.min.js"></script>一、将两个h1元素的高度都设置为200像素:$('.white').he...原创 2019-08-29 17:05:58 · 189 阅读 · 0 评论 -
移动端页面的百分比布局
以下面的HTML5代码为例来学学习页面的百分比布局:<div class="comic"> <img src="fate.png" alt="Fate"> <h1>Fate</h1></div><div class="comic"> <img src="hulk.png" alt="Hulk...原创 2019-09-08 21:22:39 · 1411 阅读 · 0 评论 -
移动端的网页Viewport设置初识
为了使移动设备能够完整的显示网页,我们可以在< head >中添加 meta 标签,对viewport 专门加以设置:<meta name="viewport" content="width=device-width,initial-scale=1.0">上面代码做了两件事:一、设置viewport 的宽度为 device-width,即显示窗口宽度等于设备宽度,也...原创 2019-08-17 18:37:18 · 316 阅读 · 0 评论