有关H5的CSS小效果:
1:背景图生效位置的三种写法:
1:background-origin:border-box; 边框生效位置
2:background-origin:content-box; 内容生效位置
3:background-origin:padding-box; 默认位置
2:文本开切位置的写法:
(写文本开切位置时,-webkit-background-clip:text; color:rgba(0,0,0,0) 要都写才可以)
-webkit-background-clip:text;
color:rgba(0,0,0,0); 配合使用
3:倒影的写法:-webkit-box-reflect:below 10px -webkit-linear-gradient(rgba(0,0,0,0) 40%,rgba(0,0,0,1));
1:below 表示为:向下
2:above 表示为:向上
3:left 表示为:向左
4:right 表示为:向右
5:10px 表示为:间距(这个值根据自己需求随便定义)
4:滤镜的写法:
-webkit-filter:blur(0px);
5:块的缩放大小写法:
resize:both;
6:缩放大小完整写法:
resize:both; overflow:hidden;
7:文本排序的写法:
direction:rtl; unicode-bidi:bidi-override;
8:变形的写法:
1:transform:
a:skew(X轴值,Y轴值) 倾斜度数 单位使用(deg)
b:scale(X轴值,Y轴值) 缩放比例
c:translate(X轴值,Y轴值) 平移像素 单位使用(px)
d:rotate 旋转度数 单位使用(deg)
2:变形样式是从后往前读
transform:skew(30deg,10deg) scale(2,2) translate(100px,20px) rotate(45deg);
9:旋转控制中心点的写法:
transform-origin:X轴值Y轴值;
1:left
2:Right
3:top
4:bottom
20px 20px
10:景深的写法(用来配合3D效果)
transform:perspective(800px);
括号里的值为800-1200之间值时效果最好。
perspective:800px;
11:3d的写法:(注意:当写3D效果时要加给父级,3D效果是不可以继承的)
transform-style:preserver-3d;
12:物体的变形写法:
transform:
1:scale X轴值 Y轴值
2:rotate X轴值 Y轴值 Z轴值
3:translate X轴值 Y轴值 Z轴值
4:skew X轴值 Y轴值
13:判断运动结束后的监听事件:
transitionend(要配合事件绑定使用)
obj.addEventListener('transitionend',fn,false);
14: H5里有关滚动条的写法 pageX pageY获取鼠标位置自带滚动距离
1:表单:
1:email
2:number
3:color
4:range
5:date
6:week
7:month
8:url
9:tel
10:search
2:表单新增属性
1:required 必填
2:pattern 里面放正则
3:step 一次加几个
4:placeholder 提示文字
5:autofocus 自动获取焦点
6:autocomplete
on 开启提示文字
off 关闭提示文字
7:title 改变提示框提示文字
15:序列化:
1:{a:1,b:5} 不标准格式
2:序列化 变成标准格式json
JSON.stringify(json)
16:反序列化
1:JSON.parse(json) 把字符串转成正常json格式
交互解析字符串一共三种方法
1:parse
2:eval
3:new Function('return abc');
网友评论