zoukankan      html  css  js  c++  java
  • 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;
                }
            }
  • 相关阅读:
    SM2加解密代码示例
    RSA加解密代码示例
    base64加解密示例
    Hutool-数据类型转换
    Hutool工具-定时任务的使用
    Java面试题(5)mybatis、数据库
    Java面试题(4)Spring
    List、List<object>、List<?>三者的区别
    关于鉴权,看懂这篇就够了
    raft之一致性算法raft
  • 原文地址:https://www.cnblogs.com/sheep-fu/p/12745742.html
Copyright © 2011-2022 走看看