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

最新推荐文章于 2023-03-06 20:51:15 发布

ice_bear-

最新推荐文章于 2023-03-06 20:51:15 发布

阅读量421

点赞数

分类专栏： web前端开发

本文链接：https://blog.csdn.net/qq_42701999/article/details/98672854

版权

web前端开发专栏收录该内容

49 篇文章 1 订阅

订阅专栏

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>
<!--

>1200px  pc
1200-768px  ipad
<768px phone
-->
</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的高度不同有缝隙
在这里插入图片描述

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

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

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的值为与右边的距离，为负值表示向右移动
在这里插入图片描述
选中灰色区域后向左划出顶部

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>

在这里插入图片描述
鼠标悬停后显示下拉栏