CSS常用属性（四）

妖狐艹你老母 2024-04-07 13:02 71阅读 0赞

/*
    *作者：呆萌老师
    *☑csdn认证讲师
    *☑51cto高级讲师
    *☑腾讯课堂认证讲师
    *☑网易云课堂认证讲师
    *☑华为开发者学堂认证讲师
    *☑爱奇艺千人名师计划成员
    *在这里给大家分享技术、知识和生活
    *各种干货，记得关注哦！
    *vx：it_daimeng
    */

1.  **动画**

**调用自定义动画 ：**

.cls_div{
    
      width: 100px;
    
      height: 100px; 
    
     
    
      /*执行动画    infinite:重复动画*/
    
      animation: 5s change2 infinite;
    
    }

**自定义动画:**

@keyframes change{
    
      from{
    
        background-color: pink;
    
      }
    
      to{
    
       
    
        background-color: blue;  
    
        margin-left: 100px;
    
       
    
      }
    
    }
    
    
    
    @keyframes change2{
    
      0%{
    
        background-color: pink;
    
       
    
        margin-left: 0px;
    
      }
    
      50%{
    
       
    
        background-color: blue;  
    
        margin-left: 100px;
    
       
    
      }
    
      100%{
    
        background-color: pink;
    
       
    
        margin-left: 0px;
    
      }
    
    }

**调用动画库:**

1.  **导入动画库**

1.  **调用**

.cls_div2{
    
     
    
      width: 150px;
    
      height: 30px;
    
      background-color: pink;
    
      animation: 3s tada infinite; /*调用动画库中的动画*/
    
    }

1.  **查看动画库中有哪些动画名称(动画库网站)**

**网址:https://daneden.github.io/animate.css/**

1.  **响应式,多媒体查询**

**媒体查询：是指根据不同的终端(不同分辨率的设备),选择不同的样式**

**方式1:在同一个css文件中分辨不同的终端**

.zong{
    
       
    
        width: 100%;
    
       
    
        border: 1px solid red;  
    
       
    
        display: flex;
    
       
    
        flex-direction: row;
    
       
    
        flex-wrap: wrap;
    
    }
    
    
    
    /*超小屏幕*/
    
    @media only screen and (max-width: 767px) {
    
       
    
        .zong div{
    
           
    
            width: 100%;
    
            background-color: blue;
    
           
    
        }
    
       
    
    }
    
    
    
    /*小屏幕*/
    
    @media only screen and (min-width: 768px) and (max-width: 992px) {
    
       
    
        .zong div{
    
           
    
            width: 50%;
    
            background-color: green;
    
           
    
        }
    
       
    
    }
    
    
    
    /*大屏幕*/
    
    @media only screen and (min-width: 993px) and (max-width: 1200px) {
    
       
    
        .zong div{
    
           
    
            width: 33%;
    
            background-color: pink;
    
           
    
        }
    
       
    
    }
    
    
    
    /*超大屏幕*/
    
    @media only screen and (min-width: 1201px) {
    
       
    
        .zong div{
    
           
    
            width: 25%;
    
            background-color: orange;
    
           
    
        }
    
       
    
    }

**方式2**