Python-ccs动画及阴影

动画及阴影

0. 什么时候该用什么布局
   <!-- 定位布局: 以下两种布局不易解决的问题, 盒子需要脱离文档流处理 -->
   <!-- 浮动布局: 一般有block特性的盒子,水平排列显示 -->
   <!-- 盒模型布局: 在父级水平居中显示, 在其他布局基础上微调 -->
   <!-- 流式布局思想 -->

一.拼接网页

    将区域整体划分起名 => 对其他区域布局不产生影响
    提出公共css => reset操作
    当有区域发送显示重叠(脱离文档流导致的), 需要通过z-index调整层级
    一定需要最外层,且最外层做自身布局时,不要做过多布局操作

二.过渡 (动画)

    transition属性

    transition: 过渡时间(必须) 延迟时间(一般不设) 过渡属性(一般采用all默认值) 过渡曲线(贝赛尔曲线)(cubic-bezier())

    过渡属性具体设置给初始状态还是第二状态 根据具体需求

    /*过渡的持续时间*/
    transition-duration: 2s;
    /*延迟时间*/
    transition-delay: 50ms;
    /*过渡属性*/
    /*单一属性 | 属性1, ..., 属性n | all*/
    transition-property: all;
    /*过渡曲线*/
    /*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
    transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);

    /*结论:*/
    /*1.尽量悬浮静止的盒子, 控制运动的盒子*/
    /*2.不能确定区间范围的属性值, 不会产生动画效果*/
    /*display 不能做动画  | opacity 可以做动画*/

三.阴影

    /*x轴偏移量 y轴偏移量 虚化程度 阴影宽度 阴影颜色*/
    box-shadow: 0 0 10px 10px black;

    /*一个盒子可以设置多个阴影, 每一套阴影间用逗号隔开*/
    box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

四.伪类实现边框

    /*自身需要定位*/
    .box {
        position: relative;
    }
    /*伪类通过定位来完成图层的布局*/
    .box:before {
       content: "";
        /*完成布局*/
       position: absolute;
        top: 10px;
        left: 0;
        /*构建图层*/
       width: 1px;
       height: 100px;
        
    }
    .box:after {
        content: "";
       position: absolute;
       width: 100px;
       height: 1px;
        
        top: 0;
        left: 10px;
    }