CSS3 弹性布局&3D动画

Posted 2020-08-05 程序猿1990

通常我们设置perspective都是给父元素设置，给当前元素设置会导致没有3D视角的中心点，给父元素的上级元素设置会导致中心点可能错误，因为父元素的上级元素高度可能和父元素不一样。如果发现旋转时元素无法出现近距离变大，远距离变小，可以看看perspective是不是给力父元素

 

animation的复合写法

只需要保证第一次出现的时间是持续时间duration，第二次出现的时间是延迟时间，其他参数顺序可以顺便写name  iteration-count  timing-function

animation:  autoRotate linear 5s    infinite;

animation.css动画库使用

希望动画的元素 添加1 动画名 添加2 animated

 动画播放完毕 移除class
  使用动画 结束事件
 one(‘click‘,function(){})这种方式绑定的事件 是一次性的
$(‘img‘).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend‘,function(){}
  浏览器兼容性写法 动画事件

分离某一个动画
找到 动画所在的 @webkit-keyframes  @keyframes 到对应的class 全部复制到 希望使用的位置
直接调用动画即可

web字体
方法1:iconfont 阿里的 图标字体库 找字体 并根据 下载的说明档使用
方法2:有字库 需要登录 输入希望生成的字体 根据说明 导入css
界面上 某段文字 特殊 可以使用 该方法

web图标
iconfont 找到对应的图片 根据文档使用
可以使用 before after 伪元素 使用
conent:‘\e600‘;

绝对居中
transform:
    position:absolute:
    top:50%;
    left:50%;
    transform:translateX(-宽度一半) translateY(-高度一半)
弹性布局
    父容器 display:flex
          justify-content: center;

    子元素:
        align-self:center;

父元素设置display:flex
子元素设置flex：1；子元素会把父元素平分
子元素设置不同数字会按数字比例平分父元素

开启弹性
display: flex;
flex-direction: column;弹性布局方向
如果 修改了 弹性布局的方向  x,y轴 会发生更改
justify-content: center;默认 x轴方向的对其方式
align-items: center;默认 y轴方向的对其方式 
flex-wrap: wrap;开启换行 如果一行装不下 会自动换行
弹性布局 子元素设置的属性
flex:1; 所在比例 也能够使用具体宽高
width:100px;
height: 100px;
 align-self: center;设置 自己的 对其方式
order:-1;越小 越靠前 可以设置为负数 默认为0
弹性布局 是可以嵌套的*/

@keyframes autoRotate{
    from{}
    to{
        
    }
}

.animated{

　　animation:  autoRotate linear 5s    infinite;
}