web学习笔记（七）

1.css动画

动画需要先编写出想要的动画，然后在所需位置引入动画。动画的命名是随意的，可以根据自己的习惯命名。

1.1动画的编写格式

动画的编写格式分以下两种，推荐使用百分比格式，方便后续的修改。

1. from to格式：

  @keyframes myfist {
            from {
                
            }
 
            to {
               
            }
 
        }

1. 在from和to后面的花括号内写入想要实现的效果，可以是背景颜色、宽度、高度等语句。
   
2. 百分比格式：

  @keyframes box2bj {
            0% {
                background-color: black;
            }
 
            25% {
                background-color: azure;
              
            }
            50%{
                background-color: blue;
 
            }
            100%{
                background-color: aqua;
            }
        }

0% 是动画的开始，100% 是动画的完成，可以根据自己的需求写入多个百分比，从而实现不同的效果（注意编写0%的语句时不可以把百分号省略掉）。

1.2引入动画

• 格式：animation: 要引入的动画名 完成动画所需时间 ;如果需要让动画循环播放可以在完成动画所需时间后写入属性值infinite。
• eg: animation: myfist 5s infinite;

1.3用动画实现简单轮播图的效果

• html部分代码：

<div class="divlbt1">
<div class="divallimg">
    <img src="../IMG/t1.jpg" alt="">
    <img src="../IMG/t2.jpg" alt="">
    <img src="../IMG/t3.jpg" alt="">
</div>
</div>

css部分代码：

     @keyframes allimg{
            0%{position: relative;
                left: 0;
        }
            50%{position: relative;
           left: -1920px;}
            100%{position: relative;
           left: -3840px;}
        }
        /* 编写动画 */
        .divlbt1{
            width: 1920px;
            height: 420px;
            overflow: hidden;
            border: 2px solid #f69;
            margin: auto;
            position: relative;
        }
     
        .divallimg{
            animation: allimg 8s infinite;
            width: 7760px;
        }

总结：

1. 一定要保证存放图片的盒子宽度足够大，可以让轮播图所需的所有图片都横向排列。
2. 在编写动画0%展示的效果时一定要编写left:0;和后面几个动画的步骤保持一致(如果是用right来定位也同理需要编写right:0;)，否则会出现图一和图二轮播不顺畅的现象。

2.媒体查询

媒体查询不需要引入，直接在对应位置编写需要修改的类名和对应的属性值即可，媒体查询内部的编写格式和css一致，需要注意在编写媒体查询条件时各个条件之间的空格不可以漏掉。

2.1媒体查询的编写格式

1. 之间在css内直接写入（注意：媒体查询尽量要写在css文件中靠下的位置）。

  @media screen and () {
            
        }

1. and后面的括号内写入媒体查询的条件，可以是最大宽度，最小宽度，最大高度，最小高度等语句。
   
2. 当页面中多个部分需要在特定屏幕大小下进行变化时，可以在链接css时将媒体查询条件写入。eg:

<link rel="stylesheet" href="../css/1.css" media="screen and (min-width:700px) and (max-width:1200px)">

1. 表示当屏幕大小大于700px，小于1200px时，执行1.css文件中的样式（注意要将引入链接写在正常引入css文件的Link语句下面）。
   

2.2媒体查询总结

• screen后面可以同时跟多个and语句，eg：

 @media screen and (min-width:700px) and (max-width:1200px){
            .box{
                border-radius: 50%;
                background-color: aquamarine;
                
            }
        }

• 表示当屏幕大于700px小于1200px时box盒子产生对应的效果。
  
• 也可以在媒体查询的语句中间用animation语句引入动画的效果。
  
• 补充知识点：最大宽度 max-width;最小宽度min-width；最大高度max-height；最小高度min-height；
  
• 注意and语句前后的空格不可以漏掉。
  
•  @media后可以跟多个属性值，我们比较常用的是screen.
  

• 3.html表示大小的单位
  
• html中表示大小的单位值有五种：px 、em 、rem、vh和vw。
• 其中px表示像素，而em和rem都是表示倍数，前者的参照物是父级元素（当父级元素不存在时参照物变成网页），后者的参照物为html网页。
• 以px作为单位的数值不可以是小数，而em和rem可以跟小数。
• 1vh的高度等于视口高度的1%。
• 1vw的宽度等于视口宽度的1%。
• 可以将盒子的宽度设置为100vw，高度设置为100vh,再给盒子设置背景图片，这样可以实现同一个页面中，滑动一整个屏幕更换一张背景图片的效果，如果是将盒子设置了具体px的宽高，那么在不同的显示器上背景将会有不同的显示效果，影响用户体验。
• 在编写网页时可以先设置html的字号为100px,然后后面所需字体大小就用rem表示，eg:font-size:0.16rem;这样做的好处是在后续通过媒体查询设置当屏幕缩小时页面的字号可以只修改html的字号，而不用多处修改