CSS常用属性（四）

/*
*作者：呆萌老师
*☑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. 导入动画库

<link rel="stylesheet" href="css/animate.min.css" />

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