• css3


    border-radius:圆角 输入百分比50%是一个圆形

    box-shadow:水平阴影的位置 垂直阴影的位置 模糊距离 都是以像素为单位

    background-origin:图片在div中开始的地方content-box是从内容开始、padding-box(默认) 或 border-box 是从边框开始;

    box-sizing:content-box(默认),border-box;border-box设置后width/height包含border/padding/content设置到所有里面*{}

    text-shadow文本阴影     word-wrap:自动换行 内容是英文使用

    2D转换/3D转换

    transform:translate(top,left):从其当前位置移动;rotate(30deg):顺时针旋转给定的角度;scale(1.1):元素尺寸增加或减少;skew(30deg,20deg):翻转给定的角度,根据x轴和y轴;

    过渡

    transition:width 2s; 添加这个属性要div有宽度或者高度的变化才可以,

    6、动画:

    @keyframes myfirst 这个是自定义的名字 用的时候调用这个名字 animation:动画名 2s写在元素里

    {

    from{background:red;}

    to{background:yellow;}

    }

    实现简单的动画

     .ab{
                 100px;
                height: 100px;
                border: 1px solid #000;
                /* 用animation后面跟定义动画的名字 加时间来使用动画 */
                animation:myfirst 10s;
            }
            @keyframes myfirst{
                /* 这是定义背景颜色 */
                from{background:red;}
                to{background:yellow;}
                /* 定义宽度 */
                20%{
                     50px;
                }
                50%{
                     100px;
                }
                100%{
                     150px;
                }
            }
  • 相关阅读:
    learning java identityHashCode
    learning java 获取环境变量及系统属性
    learning java 获取键盘输入
    learning svn add file execuable
    φ累积失败检测算法(转)
    层次锁(转)
    一致性算法中的节点下限(转)
    Fast Paxos(转)
    Zookeeper的一致性协议:Zab(转)
    FLP impossibility
  • 原文地址:https://www.cnblogs.com/sheep-fu/p/12745742.html
Copyright © 2020-2023  润新知