day7——媒体查询及一些常见的动画效果

客官°小女子只卖身不卖艺 2021-11-05 11:24 115阅读 0赞

### 1. css3多媒体查询—在不同媒体设备中中显示不同效果 ###

###### 1> 属性：@media ######

###### 2> 三种设备屏幕分辨率划分： ######

>992px  pc端，768-992px  ipad，<767px phone

###### 3> 两种方式： ######

pc端，手机端，ipad端分别写三个css；  
调用格式：三个link，假设使用背景颜色区分三个屏幕可以看到效果  
eg:

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>多媒体弹性适应屏幕</title>
        <link rel="stylesheet" media="screen and (min-width:1200px)" href="pc.css"/>
        <link rel="stylesheet" media="screen and (max-width:1199px) and (min-width:768px)" href="ipad.css"/>
        <link rel="stylesheet" media="all and (max-width:767px)" href="phone.css"/>
    </head>
    <body>
    
    </body>
    </html>

> 其中screen表示屏幕设备,all:所有设备（如屏幕或打印机等） print:打印机设备

或者将三个css写入同一页面，自动识别使用样式  
调用格式：@media all and 尺寸条件\{\}  
**其中and前后必须留有空格才能正确显示**  
eg:

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>适应窗口大小</title>
        <link rel="stylesheet" href="index.css"/>
    </head>
    <body>
    </body>
    </html>

css代码：

body{ /*pc*/
        background: pink;
    }
    
    @media all and (max-width: 767px){ /*phone*/
        body{ 
            background: #7dffd1;
        }
    }
    
    @media all and (min-width:768px) and (max-width:1200px) { /*ipad*/
        body{ 
            background: orange;
        }
    }

### 2.媒体查询案例 ###

###### 1>data-email：扩展属性，data-后加自己定义名称 ######

###### 2>`,`的含义：并列 ######

###### 3>`attr`：提取属性值attr(data-email) ######

###### 4>content的三种用法：双引号里放文字`"文字"`，url加链接地址`url("")`，添加属性值`content"("attr(data-email)")"` ######

###### 5>清除浮动：`clear` ######

section{
        width:70%;
        float:left;
        clear:left;
    }
    aside{
        width:28%;
        margin-left: 2%;
        float:right;
    }

刚开始不能理解为什么要给section设置左浮动又清除浮动，后来测试后发现如果没有给section设置左浮动，section的内容会跟在logo后面开排，属于正常文档流的方式，因为logo和nav的高度不同有缝隙  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

实例中，header中的logo和nav有header包着，但section和aside没有div包，和header同级，不是一个整体，所以解决办法有clear:left或者将两者包在div中  
方案二：  
用一个div把两者包起来后设置div\{float:left;\}

clear有三个属性，left,right,both,含义分别为左边没有任何内容，右边没有任何内容，两边没有任何内容  
实例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

### 3.变形 ###

###### 1>2D变化tranform(前三个重点) ######

*  translate: 根据x或y所给的属性平行移动

eg:`transform:tranlate(水平位移，垂直位移)；`  
同理transform:tranlate显示所有支持的浏览器  
向右向下为正值

*  rotate：顺时针旋转度数（默认参考点为中心）

eg: `transform:tranlate(30deg)`  
改变旋转参考点: `transform:original:left top`——以四个角旋转  
或者百分比`transform:original:30% 30%`——向右向下为正值  
或者给出精确值

*  scale:缩放

eg: `transform:scale（值）` 值>1表示放大，0<值<1 缩小  
写一个参数：水平数值统一放大；两个参数：水平方向，竖直方向

*  skew():倾斜

`transform:skew(30deg,20deg)`沿x轴倾斜度数，沿y轴倾斜度数  
eg:2D效果文件夹

###### 2>过渡动画——缓慢变化 ######

transition:transform 1s  linear;

其中**第一个属性**为要选中缓慢变化的而对象（如all,或宽，高，transform等）  
**第二个属性**为间隔时间  
**第三个属性**为变化形式:`linear`：匀速变化 `ease`:慢块慢 `ease-in`:慢开始`ease-out:`慢结束 `ease-in-out`:慢开始和慢结束  
也可以添加延时， `transform:delay();`或者直接添加为第一个属性

transition:2s  transform 1s  linear;

eg:过渡文件夹

###### 3>京东侧边栏 ######

position: absolute;
        bottom:0;
        right:-5px;

绝对定位中：right的值为与右边的距离，为负值表示向右移动  
![在这里插入图片描述][20190807213738295.png]  
选中灰色区域后向左划出顶部

eg：过渡test2

### 4.动画 ###

###### 1. 定义动画 ######

@keyframe name{
    0%{}
    50%{}
    可加上tranform:等等等
    }

其中`move`为动画名，百分比表示时间进程  
调用形式为：

animation:name  2s  linear  2s  infinite
    alternate forward  paused/running

运行方式：`linear ease ease-in ease-in-out ease-out`  
循环：数字或`infinite`（无限循环）

含义为：动画名 完成的总时间 时间变化格式 延时时间 循环  
是否逆向 起始位置 是否暂停  
eg:test1

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>动画</title>
        <style>
            div{
                width:100px;
                height:100px;
                background: #a2ff59;
                animation:mov  2s  linear  infinite;
            }
            @keyframes mov{
                0%{
                    background: #ff0059;
                }
                45%{
                    background: #ff7ada;
                    transform: translateX(50px);
                }
              75%{
                    background: #23beb0;
                    transform: translateY(50px);
                }
               100%{
                    background: #23beb0;
                    transform: translateX(-50px);
                }
            }
        </style>
    </head>
    <body>
    <div></div>
    </body>
    </html>

### 5.遮罩动画实现 ###

上下遮罩：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>上下遮罩特效</title>
        <style>
            .box{
                width:346px;
                height:250px;
                margin:200px auto;
                position: relative;
                overflow: hidden;
            }
            .box-img{
                position: absolute;
                left:0;
                top:0;
            }
            .box img{
                transition: .5s;
            }
            .box:hover img{
                transform: scale(1.2);
            }
            .box .box-title{
                width:346px;
                height:250px;
                background: rgba(255, 255, 255, .8);
                top:-100%;
                position: absolute;
                transition: .5s;
            }
            .box:hover .box-title{
                top:0;
            }
        </style>
    </head>
    <body>
    <div class="box">
        <div class="box-img"><img src="images/img-1.jpg" alt=""/></div>
        <div class="box-title">
            <h1>title1</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid assumenda atque beatae commodi cum delectus doloribus eum fugiat fugi</p>
        </div>
    </div>
    <script>
    
    </script>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]  
鼠标悬停后显示下拉栏  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: /images/20211105/fe63a13f4a7147289d4df0a1533086e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: /images/20211105/95f8755f6deb4bdcab537b0611ad24e7.png
[20190807213738295.png]: /images/20211105/5649c634fc714a6d8b8f7631ee3eadc6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: /images/20211105/8753c674343f406f947b030dd8b652d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: /images/20211105/0c9f651c229a4ce5be99546de5ce5b3c.png