CSS常用

2021-07-24 14:34:24 阅读：198 来源： 互联网

标签：动画常用 li nth animation background 10px CSS

字体位置

 text-align: left;  center;  right;   /* (left)默认左,(center)居中,(right)默认右*/

 line-height: 77px;     /*行高等于盒子的高度 就变成文字居中*/
 letter-spacing: 10px;  /*字与字中间的距离*/
 word-spacing: 10px;    /*一句英文单词之间的距离(就是一句话与一句话的距离)*/
 text-indent: 100px;     /*文字向后退100px*/
 text-decoration: line-through;  /*文字上面加一条直线*/

 font-style: italic;  normal;  /*(italic)斜字, (normal 正常);*/
 font-weight:lighter; normal; bolder;    /* (lighter)字体细一点,(normal)字体正常,(bolder)字体加粗一点*/

鼠标样式

cursor: pointer; /* 手*/
cursor: default; /* 指针*/
cursor: move; /* 可移动的样式*/
cursor: help; /* 帮助信息*/

超出隐藏变成...

overflow: hidden;
/*必须结合的属性,当内容溢出元素框时发生的事情*/
text-overflow: ellipsis;
/*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
display: -webkit-box;
/*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
-webkit-line-clamp: 4;
/*用来限制在一个块元素显示的文本的行数。*/
-webkit-box-orient: vertical;
/*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。*/
word-break: break-all;

背景图片

background-image: url();    /*url( 图片地址 )*/
    background-repeat:  no-repeat;  /* 图片不铺平*/
                        repeat-x;   /* 图片一行铺平*/
                        repeat-y;   /* 图片向下铺平*/
    /* 背景图位置 */
    /* 第一中写法 */
    background-position: left;  /* 照片向左中间居中*/
                         right; /* 照片向右中间居中*/
                         top;   /* 照片向上中间居中*/
                         bottom;/* 照片向下中间居中*/
                         center;/* 照片向背景中间居中*/
    /* 第二中写法 */
    background-position:30px  100px; /* 距离左边30px  距离上面100px*/

    background-attachment: fixed;   /* 照片固定在一个点,滑动的时候照片不动*/
                           scroll;  /*照片跟着一起滑动*/
    /* 背景图大小 */
    background-size:20px 20px;   /*照片大小*/

边框

border:1px solid red;   /* 1px边框大小 solid边框直线 red边框颜色 */
               solid    /*实线*/
               dotted   /*点线*/
               dashed   /*虚线*/
               double   /*双线*/
border-color: transparent;(透明)

边距

/* 内边距 */
padding: 10px 40px 50px 60px; /*上 右 下 左  四个方向*/

padding-left: 10px; /*左边距*/
padding-right: 10px; /*右边距**/
padding-top: 10px; /*上边距**/
padding-bottom: 10px; /*下边距**/

/* 外边距 */
margin: 10px 40px 50px 60px; /*上 右 下 左  四个方向*/

margin-left: 10px; /*左边距*/
margin-right: 10px; /*右边距**/
margin-top: 10px; /*上边距**/
margin-bottom: 10px; /*下边距**/

圆角与阴影

/* 圆角 */
border-radius: 50%; /*圆形   ps:长方形不能变成圆形*/

/* 阴影 */
box-shadow: 0 4px 10px rgb; /*阴影*/

/* 文字阴影 */
text-shadow: 10px 10px 10px #000000; /* 第一个是右边的距离,第二个上下的距离  第三个是阴影的清晰度  最后一个颜色 */
text-shadow: -10px -10px 10px #000, 10px 10px 10px #000; /* 第一个是右边的距离,第二个上下的距离  第三个是阴影的清晰度  最后一个颜色 (写多个的样式)*/

/* 浮雕文字 */
text-shadow: -2px -2px 2px rgb(0, 0, 0), 2px 2px 2px rgb(255, 255, 255);

css3

css3 选择器

/* 个人比较常用的 */

/* before 在标签文字前面加的东西 */
div::before {
  content: '---';
}

/*:after标签文字后面加的东西*/
div::after {
  content: '========';
}

li:nth-child(1) {
} /*li:nth-child(1)表示第一个被选择上*/


/*倍数写法*/
li:nth-child(3n){background:orange;}
/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/




/*倍数分组匹配*/

li:nth-child(3n+1){background:orange;}
/* 匹配第1、第4、第7、…、每3个为一组的第1个LI*/

li:nth-child(3n+5){background:orange;}
/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/

li:nth-child(5n-1){background:orange;}
/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/




/*奇偶匹配*/
li:nth-child(even){background-color: #000; }  //（偶数行）

li:nth-child(odd){background-color: #ccc;} //（奇数行）

css3 动画

 /* 动画兼容
        Trident内核：前缀为-ms
        Gecko内核：前缀为-moz
        Presto内核：前缀为-o
        Webkit内核：前缀为-webkit
        -moz代表firefox浏览器私有属性
        -ms代表IE浏览器私有属性
        -webkit代表chrome、safari私有属性
     */

    animation:  move 2s ease 1s infinite alternate both;
    /*move名字 2s动画时间  ease移动的状态  1s动画延时  infinite重复次数  alternate(是否跳回起点从新开始)  both动画执行完后的状态;*/

    animation-name: move;               /*自定义名字    */
    animation-duration: 5s;             /*动画持续时间  */
    animation-timing-function: ease ;   /*动画是怎么移动*/
    animation-delay: 1s;                /*动画延迟,只有第一次 (就是第一次开始移动的时候延时多久开始执行)*/
    animation-iteration-count: 2;       /*重复次数   infinite(无限次重复)    ps:填写数字就是执行几次  */

    animation-direction: alternate;     /* 动画是否重置在播放  */
                         alternate;     /* 动画直接从上一次停止的位置开始执行，倒着来*/
                         normal;        /* 动画第二次直接跳到0%的状态开始执行(跳回起点从新开始)*/

     animation-fill-mode: both;         /*动画执行完后的状态*/
                          forwards      /* 当动画完成后次数之后 就在执行完的位置上(结束时状态上)*/
                          backwards     /*在 animation-delay 所指定的一段时间内，(就动画执行完后跳回起始位置(开始位置))*/
                          both          /*设置对象状态为动画结束或开始的状态，结束时状态优先 (结束时状态上)*/
    /*  form起点  to 终点 */
    @keyframes move{
        form{
            起始位置
        }
        to{
            终点位置
        }
    }
     /*  form起点  to 终点 */
    @keyframes move{
        0%{
            起始位置
        }
        100%{
            终点位置
        }
    }

    /* 执行过程 */
        transform:  none;    /*不进行转换。*/
                    skew(20deg,0deg);/*  skew(x,y)定义沿着 X 和 Y 轴的 2D 倾斜转换。skew(x,y)   x左右斜方向   y上下斜方向 */

    /* 原地 */
        transform:  rotateX(180deg);     /*上下反转180deg */
                    rotateY(180deg);     /*左右反转180deg */
                    rotateZ(180deg);     /*平面转动180deg*/

    /* 移动 */
        transform:  translateZ(100px);   /*正值向前移动 ,  负值向后移动*/
                    translateY(100px);   /*正值向右移动 ,  负数向左移动*/
                    translateX(100px);   /*正值向下移动 ,  负数向上移动*/

    /* 放大与缩小 */
        transform:  scale(2,1); /*可以对元素进行宽高变大倍数，第一个值是宽，第二个值是高度 ,不可为负值；*/

标签：动画,常用,li,nth,animation,background,10px,CSS
来源： https://www.cnblogs.com/yuluochengxu/p/15055091.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9