transform的四个基本转换
转换
- 缩放 scale
- 位移 translate
- 旋转 rotate
- 倾斜 skew
以上四种转换方式是比较特殊,其实他们都是由 matrix 矩阵
动画速度
- ease 先快后慢 最后非常慢
- linear 匀速
- ease-in 速度越来越快
- ease-out 速度越来越慢
- ease-in-out 速度先快后慢
以上五种动画速度是比较特殊,其实他们都是由 贝塞尔曲线 来的
3d转换 translate3d rotate3d
2d转换和3d转换区别:
1.除了多了一个参数表示3d
2.在移动端使用3d转换可以优化性能(如果设备有3d加速引擎 GPU 可以提高性能 ,是2dz转换是无法调用GPU)
www.css88.com前端网站
background: url("../cart/imges/06-bg.png) no-repeat 25% bottom / 800px 300px;
上面代码的背景大小为w 800 h 300;
/*1.背景图的定位百分比不是按照容器的大小去换算的*/
/*2.百分比的背景定位: 基于 (容器的宽度-背景的宽度)*25% */
具体在小项目的第六个屏幕
转换过后就会提高他的层级
.screen06.now .personImg{
transform: none;
right: 120px;
/*可以执行第一个动画,在执行下一个动画*/
/*过度一下*/
transition: transform 1s linear 5.5s,right 0.5s linear 6.5;
}
在一个transition中执行多个动画 如上 需要过度 /*注意一点:需要不同样的属性状态改变*/ right和transition
让元素一个个出来
css中的写法是.
screen07 .star.now img{
opacity: 1;
transition: all 0.3s linear;
}
然后在jq中控制时间
$(this).css('transition-delay',i*0.5+'s');
注意需要加上now类名,触发条件是当离开第六页带第七页的时候
自定义属性的命名规则 使用 data-userName
//获取属性值 1
<div id="text" value="黑哒哒的盟友"><div>
jQuery取值: $("#text").attr("value");
//获取自定义属性值 2
<div id="text" value="123" data_obj="黑哒哒的盟友"><div>
JQUERY取值:$("#text").attr("data_obj");
//获取data值 3
<div id="text" value="123" data-name="黑哒哒的盟友"><div>
JQUERY取值:$("#text").data("name");
设置自定义属性的值
$("#text").data("name","value");
h5获取自定义属性
dataset式自定义属性的集合
var div = document.querySelector('div');
/*获取所有 $('div').data() */
var set = div.dataset;
/*获取单个自定义属性 $('div').data('user')*/
/*var user = set.user;
var user = set['user'];*/
在这里面中 dataset相当于获取到了这个div对象里面所有的自定义属性
data获取的是单个自定义属性
设置单个属性的值
div.dataset.user = "gg";通过找到自定义属性集合
div.dataset点出具体的自定义属性的名称直接设置属性值
jq的data是操作内存
h5的dataset是操作dom的
操作内存的在dom上没有直接表现出来
操作dom直接在dom上直接看到了