CSS3 神器总结

Posted 2021-02-01 www-sina-com

1. 选择类

 1.1 /* 鼠标选中区域，改变背景/字体颜色 */
        /*遍历写法*/
        div::selection {
            background-color: red;
            color: #fff;    /* font-size、font-weight等 设置不起作用 */
        }

        /*全局写法*/
        ::selection {
            background: #000;
            color: #fff;

2. 文字类

2.1 /* 伪元素选择器 */
　　　　/* 第一个字母/汉字 */
　　　　　　li::first-letter {
    　　　　　　color:red;
    　　　　　　background-color: yellow;
　　　　　　}

　　　　/* 第一行 */
　　　　　　div::first-line {
    　　　　　　background-color: green;
　　　　　　}
　　　　/*大小写转换*/
　　　　　　.tit{
    　　　　　　/*text-transform: capitalize;/!*首字母大写*!/*/
    　　　　　　/*text-transform: uppercase;/!*所有单词转换为大写*!/*/
    　　　　　　text-transform: lowercase;/*所有单词转换为小写*/
　　　　　　}　　

2.2 /*文字多出部分省略号代替 仅适用于单行文本*/
        p{
            white-space:nowrap;
            text-overflow:ellipsis;
            overflow: hidden;
        }

2.3 /*设置文本纵向排列*/
        .title{
            width: 20px;
            writing-mode: tb-rl;
            letter-spacing: 20px;
            text-indent: 30px;
        }

3. 外观样式类

3.1 /*设置单选框样式*/
      input {
              width: 20px;
              height: 20px;
              padding-left: 22px;
              cursor: pointer;
              background: url(images/check.png) no-repeat 2px 1px;
              -webkit-appearance: none;
      }

设置后的样式： 

3.2 /*设置div宽度100%，两边留白(也可设置于高度)*/

　　　 .box{
    　　　　width: -webkit-calc(100% - 50px);
    　　　　width: calc(100% - 50px);
    　　　　height: 300px;
    　　　　margin: 0 auto;
    　　　　background: #ccc;
    　　　　overflow: hidden;
　　　　}

设置后的样式：

 

 3.3 /*设置光标不能点击*/
        .btn{
            cursor: no-drop;
        }

   

 

3.4 /* 设置textarea文本框不能拖拽缩放 */
        textarea{
            resize: none;
        }

 

3.5 /* 圆角边框 */

.box{
    width:100px;
    height:100px;
    border-radius: 10px 20px;
    border: 1px solid red;
}

10px; 一个值的时候即为设置上下左右边框
10px 20px; 依次为：上下边框 左右边框
10px 20px 30px; 上边框 左右边框 下边框
10px 20px 30px 40px; 上边框 右边框 下边框 左边框 

3.6 /* box-shadow 盒子阴影 */      /* text-shadow 文本阴影 */
　　
box-shadow:2px 2px 4px red inset; /* X轴偏移量 Y轴偏移量 阴影距离 阴影颜色 内阴影（可以不设置内阴影，默认为外阴影） */
text-shadow 语法和box-shadow 一致

　　

浏览器在编译数字或者字母的时候默认不会自动换行，解决方法：

　　div{
          width: 90px;
          border: 1px solid red;
          word-break: break-all;
          word-warp: break-word;
   }

 4. 动画类

4.1 /* 加载loading */
CSS代码如下：
@keyframes bouncing-loader {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0.1;
                transform: translateY(-1rem);
            }
        }
        .bouncing-loader {
            display: flex;
            justify-content: center;
        }
        .bouncing-loader > div {
            width: 1rem;
            height: 1rem;
            margin: 3rem 0.2rem;
            background: #8385aa;
            border-radius: 50%;
            animation: bouncing-loader 0.6s infinite alternate;
        }
        .bouncing-loader > div:nth-child(2) {
            animation-delay: 0.2s;
        }
        .bouncing-loader > div:nth-child(3) {
            animation-delay: 0.4s;
        }

html代码如下：
<div class="bouncing-loader">
    <div></div>
    <div></div>
    <div></div>
</div>

实现效果如下：　

　

 

 5. transform /*旋转 变形 */

 transform: rotate(-20deg); /*旋转*/
 transform: skew(45deg); /*扭曲*/
 transform: scale(0.8); /*缩放*/
 transform: translate(50px, 100px); /*位移*/

 

6. animation /* 动画 */

HTML代码如下：

.yun{
 position: absolute;
 left: 0;
 top: 90px;
 background: url(http://gzzta.com.cn/images/gzkdqggjyyj_zt/yun1.png) repeat-x;
 height: 100%;
 width: 300%;
 min-width:1200px;
 -webkit-animation: cloud_one 100s linear infinite;
 -moz-animation: cloud_one 100s linear infinite;
 -o-animation: cloud_one 100s linear infinite;
 animation: cloud_one 100s linear infinite;
 -webkit-transform: translate3d(0, 0, 0);
 -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
}

 
 CSS代码如下：

 @-webkit-keyframes cloud_one {
            0% {
                left: 0
            }
            100% {
                left: 200px
            }
        }
        @keyframes cloud_one {
            0% {
                left: 0
            }
            50% {
                left: -100%
            }
            100% {
                left: -200%
            }
        }