TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
搜索到 12 篇与 H5&C3 的结果
2019-04-27

H5&C3之3D变换和动画

H5&C3之3D变换和动画
一、浏览器坐标系从左到右的方向是浏览器x轴的正方向;从上到下的方向是浏览器y轴的正方向;z轴正方向是面对于我们的;二、3D变换transform-style建立3D空间transform-style: preserve-3d;perspective 景深perspective: 300px;> 景深是指相机对焦点前后相对清晰的成像范围。景深就是我们的肉眼距离显示器的距离。景深越大,元素离我们越远,效果就不好 perspective- origin 景深基点// 即站在那个方位看物体,默认是center center // left top即左上角位置看物体 perspective-origin: left top;transform 新增函数- rotateX() - rotateY() - rotateZ() - translateZ() transform: rotateX(360deg); transform: rotateY(360deg); transform: rotateZ(360deg); // 即是旋转效果 transform: translateZ...

H5&C3

263 阅读
2019年04月27日
263 阅读
0 评论
2019-04-27

H5&C3之过渡效果和2D变换

H5&C3之过渡效果和2D变换
一、transition过渡transition-property: 要运动的样式(all || [attr] || none)transition-duration: 运动时间transition-delay:延迟时间transition-timing-function: 运动形式- ease: 逐渐变慢(默认值) - linear: 匀速 - ease-in: 加速 - ease-out: 减速 - ease-in-out: 先加速后减速 - cubic-bezier: 贝塞尔曲线(x1, y1, x2, y2 ) transition: all 2s; // 所有属性,过渡时间2s transition: width 2s, height 3s;> 贝塞尔曲线在线编辑: http://cubic-bezier.com/ 二、过渡事件Webkit // 添加事件 obj.addEventListener('webkitTransitionEnd',function(){},false); // 删除事件 obj.removeEventListener(...

H5&C3

247 阅读
2019年04月27日
247 阅读
0 评论
2019-04-25

H5&C3之响应式布局

H5&C3之响应式布局
一、响应式布局原理第一步:Meta标签大多数移动浏览器将HTML页面放大为宽的视图(viewport)以符合屏幕分辨率。你可以使用视图的meta标签来进行重置。下面的视图标签告诉浏览器,使用设备的宽度作为视图宽度并禁止初始的缩放。在标签里加入这个meta标签。<meta name="viewport" content="width=device-width, initial-scale=1user-scalable=no">第二步:HTML结构由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素,更多都是百分比操作,这一条非常重要。字体也不能使用绝对大小(px),而只能使用例如相对大小(em)、相对大小(rem)。第三步:媒体查询-Media QueriesCSS3 Media Query-媒体查询是响应式设计的核心。它根据条件告诉浏览器如何为指定视图宽度渲染页面。媒体查询的目的在于为指定的视图宽度指定不同的CSS规则,来实现不同的布局。媒体查询可以写在同一个或者单独的样式表中。IE8或者更早的浏览器并不支持Media Query。...

H5&C3

115 阅读
2019年04月25日
115 阅读
0 评论
2019-04-25

H5&C3之选择器

H5&C3之选择器
一、属性选择器Element[attr]只使用属性名,但没有确定任何属性值p[cxy]{background: red;color: white;}Element[type="text"]指定属性名,并指定了该属性的属性值p[cxy=html]{background: red;color: white;} p[cxy='css']{background: red;color: white;}Element[attr~="value"]指定属性名,属性值是一个列表,并且以空格隔开,其中列表中包含了一个value词<p cxy='html test'>html</p> // 包含有html的元素 p[cxy~=html]{color: yellow;} // p[cxy=html]{color: yellow;} 这是获取不到对应元素的Element[attr^="value"]指定了属性名,并且有属性值,属性值是以value开头的<p cxy='javascript'>javascript</p> <p cxy='jquery...

H5&C3

136 阅读
2019年04月25日
136 阅读
0 评论
2019-04-12

H5&C3之地理信息

H5&C3之地理信息
一、地址位置经度: 南北的连接线维度: 东西的连接线二、位置信息从哪里获取?IP地址GPS全球定位系统WIFI无线网络手机基站三、地理位置对象navigator.geolocationgetCurrentPosition(): 单次定位请求// 参数1: 请求成功函数 // 参数2: 请求失败函数 // 参数3: 数据收集(JSON数据格式) navigator.geolocation.getCurrentPosition(function(){}, function(){}, {}); // 参数3选项设置 options = { enableHighAccuracy,   // boolean 是否要求高精度的地理信息 timeout,         // 表示等待响应的最大时间,默认是0毫秒,表示无穷时间 maximumAge        // 应用程序的缓存时间 }请求成功函数经度: position.coords.longitude 维度: position.coords.latitude 准确度: position.coords.accur...

H5&C3

137 阅读
2019年04月12日
137 阅读
0 评论