H5基础 |
您所在的位置：网站首页 › far变形 › H5基础 |
|
灵魂拷问：
浏览器能干什么？ 我能让浏览器干什么？ 前端开发： 一点点的空间想象力一点点的小学数学知识一点点的艺术鉴赏能力 HTML5和CSS3提高 HTML5新特性 HTML5新增的语义化标签代替div，一看名字就知道干什么的 之前的布局基本都是div+css来布局，div最大的问题是没有语义，不利于搜索引擎处理 header nav article section aside footer 注意： 这些标签是针对搜索引擎的 可以使用多次，用class或者id区分 移动端没有兼容性问题 HTML5新增的多媒体标签 1 音频 audio支持三种格式 mp3（所有浏览器都支持） wav ogg src = “” 文件路径 autoplay 2 视频 videovideo src=“” 支持三种格式： mp4 （支持所有浏览器）webm ogg controls=“controls“ 显示控件 muted 是否静音 autoplay 自动播放 （谷歌浏览器必须设置muted才生效） loop 循环播放 width 宽度 height 高度 总结： 音频标签和视频标签使用方法基本相同 MP3 和mp4格式兼容性比较好 HTML5新增的input类型search url date time month week number tel color 点击提交按钮的时候，浏览器会对输入框进行验证。 重点记住number tel search三个 HTML5新增的表单属性required 必须书写 placeholder 提示文本 autofocus 打开页面自动获得焦点 autocomplete 提交过并且有name值，浏览器会保存，下次系统会提示，一般会关掉 multiple 多选，可以选多个文件提交 input::placeholder { color:pink } CSS3的新特性 新增选择器 **1 属性选择器 **（属性选择器权重跟类选择器一样，都是10） 根据元素特定属性来选择元素,E 为标签名 E[attr] 具有某个属性E[attr=‘’] 属性=某个值 input[type=text]E[attr^=‘’] 属性值 以什么开头 div[class^=‘icon’]E[attr$=‘’] 属性值 以什么结尾 div[class^=‘icon’]E[attr*=‘’] 属性值含有 div[class*=‘val’] 2 结构伪类选择器根据父级选择里面的子元素 E:first-child 第一个孩子 E:last-child 最后一个孩子 E:ntp-child(n) 第几个孩子 even偶数 odd奇数 还可以用公式（n从0开始递增） 2n偶数2n+1 奇数5n 5的倍数n+5 从第三个开始后面的元素-n+5 前5个元素E:nth-of-type(n) 指定元素排上序号，用法和nth-child基本相同。 div:nth-of-type(3 ) 区别： nth_child 给所有的孩子都先排序，先找到第n个孩子，然后看看是否和E匹配 nth-of-type 对父元素里面指定子元素排序选择，先去匹配E然后根据E找第n个孩子 3 伪元素选择器伪元素用来修饰真元素。 ::before ::after 注意： before和after创建一个元素，属于行内元素新创建的这个元素在文档中是找不到的，所以我们称之为伪元素语法： element::beforebefore和after必须有content属性before在父元素内容的前面创建元素，after在父元素内容的后面插入元素伪元素选择器和标签选择器一样，权重为1伪元素是父元素的孩子，用于修饰父元素内容，属于行内 元素 .box:hover::before 中间不能有空格。 清除浮动 div：after { content：“”； display：block； clear：both； } 盒子模型box-sizing： content-box 默认模式， 盒子大小为content+padding+border box-sizing：border-box 盒子大小为实际盒子大小，改变border和padding不会改变盒子大小 CSS新特性：1 图片变模糊 filter：blur（5px）， 数值越大，图像越模糊。 0为不模糊 css3滤镜filter 2 calc函数 width：calc（100%-80px） 比如子盒子永远比父盒子小30px。 .son (width：calc（100%-30px）) 括号里面可以进行加减乘除的计算 CSS3过渡(重点)过渡（transition）是css3中具有颠覆性的特征之一，我们可以在不使用Flash动画或JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果 过渡动画： 从一个状态渐渐过渡到另外一个状态 可以让我们页面更好看，更动感十足 我们现在经常和：hover一起搭配使用 transition：要过渡的属性 花费的时间（秒） 运动曲线 何时开始（延时几秒） 前两个必须写。 谁做过渡给谁加。 2D 转换 transform（变形） 2D： 二维坐标系translate 改变位置 transform：translate（x,y) transform：translateX（x) transform：translateY（y) 三种移动位置的办法： 定位 margin transform：translate （不会影响其他盒子的位置） 可以跟百分比，是自身尺寸的百分比 translate对行内元素无效 rotate（45deg）transform：rotate（45deg） 正值，顺时针 负值，逆时针 改变中心点： transform-origin: left bottom; （支持百分比和方位名词） scaletransform：scale（x,y) xy 为倍数， 只写一个表示宽高等比例缩放 scale 可以设置缩放的中心点 2D转换的综合写法：transform: translate(50px,50px) scale(1.2) 注意顺序， 旋转会改变坐标轴方向，同时位移和旋转，把位移放在前面。 动画 /* 定义动画，定义关键帧，可以从0到100%任意对时间进行切片 */ @keyframes move{ 0% { transform: translateX(0px); background-color: purple; } 100% { transform: translateX(1000px); background-color: blue; } } /* 调用动画 */ div { height: 200px; width: 200px; background-color: pink; animation: move 3s; }/* animation: name duration timing-function delay iteration-count direction fill-mode; */ 简写形式不包括 animation-play-state 热点效果 .map{ position: relative; width: 747px; height: 616px; background-color: #ccc; margin: 0 auto; } .city{ position: absolute; top: 227px; right: 193px; } .dotted { width: 8px; height: 8px; background-color: #09f; border-radius: 50%; } .city div[class^='pulse'] { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 8px; height: 8px; box-shadow: 0 0 12px #009dfd; border-radius: 50%; animation: pulse 1.2s linear infinite; } .city div.pulse2 { animation-delay: 0.4s; } .city div.pulse3 { animation-delay: 0.8s; } @keyframes pulse { 0% { } 70% { width: 40px; height: 40px; opacity: 1; } 100% { width: 70px; height: 70px; opacity: 0; } } 打字机效果 .line { padding: 0; width: 0; height: 20px; font-size: 20px; background-color: pink; /* white-space: nowrap; */ /* overflow: hidden; */ animation: daziji 4s steps(10) forwards; } @keyframes daziji { 0% {} 100% { width: 200px; } } 世纪佳缘我在这里等你 奔跑的小熊实现原理： 动画1： 奔跑的小熊 8张小熊图片在1600*200的png背景图上， 用动画的step（8）函数 快速移动position-left ，实现动画效果 动画2： 小熊从屏幕左侧移动到屏幕中央 用定位和动画来做 动画3： 小熊跑到屏幕中央后，大背景图开始移动。 注意延时。 3D转换 近大远小物体后面看不见 三维坐标系 X轴：水平向右 向右是正值 向左是负值Y轴： 垂直向下 向下是正值 向上是负值Z轴： 垂直屏幕 往外是正值 往里是负值（类似海拔）主要知识点： 3D移动transform：translateX（x) 仅仅在Z轴上移动 transform：translateY（y) 仅仅在Z轴上移动 transform：translateZ（z) 仅仅在Z轴上移动**（仅仅用像素为单位）** 综合写法： transform: translate3d(100px,100px,100px); 三个值都不能少，没有可以写0 div { width: 100px; height: 100px; background-color: pink; /* transform: translateX(100px) translateY(100px) translateZ(100px); */ transform: translate3d(100px,100px,100px); }要添加透视才能看到效果 透视 perspective透视可以让网页产生3D效果 透视就是眼睛到屏幕的距离，透视越大，物体越小。 透视越小，物体越大。 透视写在被观察元素的父盒子上面。 3D旋转3d旋转可以在三维平面围绕x，y，z轴或者自定义轴旋转。 语法： transform:rotateX(45deg) 沿着x轴正方向旋转 transform:rotateY(45deg) 沿着y轴正方向旋转 transform:rotateZ(45deg) 沿着z轴正方向旋转 transform:rotateZ3d(x,y,z,45deg) 沿着自定义的轴正方向旋转，xyz 定义轴 左手准则： 大拇指指向坐标轴方向，弯曲的四指头是顺时针方向（正方向） 3D呈现 transform-style transform-style: preserve-3d 子盒子开启立体空间 代码写给父级，但是影响的是盒子 这个属性很重要，后面常用 案例： 旋转木马一个盒子一套坐标系，旋转盒子后，坐标轴方向同时发生变动。 动画开发思路： 先写好盒子，布置好各个图层，然后让box动起来。 注意两点： 1 确定观察视角 perspective: 500px; 2 让盒子保留3D视角 transform-style: preserve-3d; CSS动画总结：动画的基础是 transform， 首先定义变形，然后通过transition或者amitation让它动起来。 注意2d和3d的区别，其中也就两个关键字： perspective transform-style 浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无需添加 1 私有前缀 -moz- 代表firefox浏览器私有睡醒 -ms- 代表ie浏览器私有属性 -webkit- 代表 safari chrome私有属性 -o- 代表opera私有属性 广义的HTML5狭义的HTML5 1993： 1.0 1999:4.01 2008:5 广义的HTML5： HTML5 +CSS3+JS HTML5 MDN介绍： https://developer.mozilla.org/zh-CN/docs/Learn/HTML |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |