• CSS常用属性（四）

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

    调用自定义动画 ：

    1. .cls_div{
    2.  
    3.   width: 100px;
    4.  
    5.   height: 100px; 
    6.  
    7.  
    8.  
    9.   /*执行动画    infinite:重复动画*/
    10.  
    11.   animation: 5s change2 infinite;
    12.  
    13. }

    自定义动画:

    1. @keyframes change{
    2.  
    3.   from{
    4.  
    5.     background-color: pink;
    6.  
    7.   }
    8.  
    9.   to{
    10.  
    11.    
    12.  
    13.     background-color: blue;  
    14.  
    15.     margin-left: 100px;
    16.  
    17.    
    18.  
    19.   }
    20.  
    21. }
    22.  
    23.  
    24.  
    25. @keyframes change2{
    26.  
    27.   0%{
    28.  
    29.     background-color: pink;
    30.  
    31.    
    32.  
    33.     margin-left: 0px;
    34.  
    35.   }
    36.  
    37.   50%{
    38.  
    39.    
    40.  
    41.     background-color: blue;  
    42.  
    43.     margin-left: 100px;
    44.  
    45.    
    46.  
    47.   }
    48.  
    49.   100%{
    50.  
    51.     background-color: pink;
    52.  
    53.    
    54.  
    55.     margin-left: 0px;
    56.  
    57.   }
    58.  
    59. }

    调用动画库:

    1. 导入动画库
    .min.css" />
    1. 调用

    1. .cls_div2{
    2.  
    3.  
    4.  
    5.   width: 150px;
    6.  
    7.   height: 30px;
    8.  
    9.   background-color: pink;
    10.  
    11.   animation: 3s tada infinite; /*调用动画库中的动画*/
    12.  
    13. }

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

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

    1. 响应式,多媒体查询

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

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

    1. .zong{
    2.  
    3.    
    4.  
    5.     width: 100%;
    6.  
    7.    
    8.  
    9.     border: 1px solid red;  
    10.  
    11.    
    12.  
    13.     display: flex;
    14.  
    15.    
    16.  
    17.     flex-direction: row;
    18.  
    19.    
    20.  
    21.     flex-wrap: wrap;
    22.  
    23. }
    24.  
    25.  
    26.  
    27. /*超小屏幕*/
    28.  
    29. @media only screen and (max-width: 767px) {
    30.  
    31.    
    32.  
    33.     .zong div{
    34.  
    35.        
    36.  
    37.         width: 100%;
    38.  
    39.         background-color: blue;
    40.  
    41.        
    42.  
    43.     }
    44.  
    45.    
    46.  
    47. }
    48.  
    49.  
    50.  
    51. /*小屏幕*/
    52.  
    53. @media only screen and (min-width: 768px) and (max-width: 992px) {
    54.  
    55.    
    56.  
    57.     .zong div{
    58.  
    59.        
    60.  
    61.         width: 50%;
    62.  
    63.         background-color: green;
    64.  
    65.        
    66.  
    67.     }
    68.  
    69.    
    70.  
    71. }
    72.  
    73.  
    74.  
    75. /*大屏幕*/
    76.  
    77. @media only screen and (min-width: 993px) and (max-width: 1200px) {
    78.  
    79.    
    80.  
    81.     .zong div{
    82.  
    83.        
    84.  
    85.         width: 33%;
    86.  
    87.         background-color: pink;
    88.  
    89.        
    90.  
    91.     }
    92.  
    93.    
    94.  
    95. }
    96.  
    97.  
    98.  
    99. /*超大屏幕*/
    100.  
    101. @media only screen and (min-width: 1201px) {
    102.  
    103.    
    104.  
    105.     .zong div{
    106.  
    107.        
    108.  
    109.         width: 25%;
    110.  
    111.         background-color: orange;
    112.  
    113.        
    114.  
    115.     }
    116.  
    117.    
    118.  
    119. }

    方式2

  • 相关阅读:
    C++设计模式之装饰者模式(结构型模式)
    罗德里格斯公式
    Educational Codeforces Round 10
    MySQL 8.0.34（x64）安装笔记
    浏览器中的页面循环系统（二）Webapi：setTimeout是怎么实现的
    【无标题】
    项目管理的方法论 一
    SpringCloud使用Zookeeper作为服务注册发现中心
    【Linux】安装Hbase
    Qt学习总结之单选框QRadioButton和QButtonGroup
  • 原文地址：https://blog.csdn.net/daimenglaoshi/article/details/126693287