2019.6.22 Web全栈开发学习笔记（七）

SkywalkerHD

已于 2023-06-29 10:04:33 修改

阅读量156

点赞数

CC 4.0 BY-SA版权

于 2019-07-24 17:05:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44363959/article/details/97137178

学习笔记专栏收录该内容

19 篇文章

订阅专栏

本文介绍了CSS媒体查询的应用，用于根据不同屏幕尺寸调整样式。同时，深入探讨了转换（transform）、过渡动画（transition）和自定义动画（@keyframes）等特性，通过实例展示了如何实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day 7

课程内容

一、媒体查询

使用@media 规则，针对不同媒体类型可以定制不同的样式规则。例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则。

<link rel="stylesheet" media="screen and  (min-width:1200px)" href="pc.css"/>   
<link rel="stylesheet" media="all and (min-width:768px) and (max-width:1199px)" href="ipad.css"/>
<link rel="stylesheet" media="all and (max-width:767px)" href="phone.css"/>

"ipad.css"
body{
    background:orange;
}

"pc.css"
body{
    background:pink;
}

"phone.css"
body{
    background:pink;
}

其综合起来的效果就是当屏幕宽度大于1200px时，背景色为粉色，当处于768px和1199px之间时，背景色为橙色，小于767px时，背景色为粉色。
利用这个功能就可以实现在尺寸或分辨率不同的屏幕上，可以有不同的样式。

二、转换（transform）

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
方式：

移动：translate()
transform:translate(水平位移，垂直位移)
值为正值，水平向右，垂直向下，负值，水平向左，垂直向上
旋转：rotate()
transform:rotate(角度)
transform-origin:旋转参考点（left right top bottom 百分比精确值）
语法：
transform-origin（x坐标，y坐标）
缩放：scale()
transform:scale(值) 值大于1，表示放大值在0－1之间表示缩小，一个值表示水平垂直都缩放，2个值表示水平和垂直方向
倾斜：skew()
transform:skew(值) 表示沿X轴和Y轴进行倾斜得到的效果

三、过渡动画

格式：transition:属性时间过度方式；
其中：
属性：具体属性值，transform,all（全部）
时间：秒（s）
过度方式：

linear 匀速
ease 慢快慢
ease-in 以慢开始
ease-out 以慢结束
ease-in-out 以慢开始和结束

可以与转换综合一起使用：
transform:rotate() translate()

四、自定义动画

定义：

@keyframes name{
0%{}

100%{}
}

调用：

animation:name 1s linear 2s infinite;

其中：
name 表示定义的动画名称
1s 表示动画执行的时间
linear 表示动画的运行方式
2s 表示动画延迟时间
infinite 表示循环

animation语法
animation:动画名称运行时间运行方式延迟时间循环次数是否逆向不播放时应用样式是否暂停
其中：
运行方式：linear ease ease-in ease-in-out ease-out
循环：数字或infinite（无限循环）
是否逆向：alternate
不播放时应用样式：forward 动画结束后停止到动画结束时的状态，（不恢复回去）
是否暂停： paused/running

五、实例

一个简易的遮罩动画，当鼠标悬停时，将文本与背景以遮罩的动画形式显示出来
代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>上下遮罩效果</title>
    <style>
        .box{
            width:346px;
            height:250px;
            border:solid 1px #f00;
            margin:50px 0 0 50px;
            position: relative;
            overflow: hidden;

        }
        .box img{
            transition: transform .5s linear;
        }
        .box>div{
            width:346px;
            height:250px;
            background: rgba(255, 0, 0, .3);
            position: absolute;
            left:0;
            top:-250px;
            transition: top .5s linear;
            color:#fff;
        }
        .box:hover img{
            transform: scale(1.2);
        }
        .box:hover div{
            top:0;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="img-1.jpg" alt=""/>
    <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus corporis, deserunt exercitationem facere fugit hic, id magnam nihil numquam placeat quae quaerat quibusdam quisquam quos ratione, temporibus tenetur totam unde.
    </div>
</div>
</body>
</html>