一、过渡
特点： 元素发生改变不会立即生效
过渡需要手动触发 hover active @media
需要告诉系统哪一个元素需要过渡 持续时间
transition-property 设置过渡属性
transition-duration 设置过渡持续时间
transition-delay 设置过渡等待时长
transition-timing-function 设置过渡速度曲线
简写为transition:property duration timing-function delay;
可以使用如下代码进行测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
/* 设置要过渡的属性 设置多个属性过渡 需要使用，隔开 */
transition-property: width,background-color;
/* 设置过渡持续时间 */
transition-duration: 2s,1s;
/* 设置过渡等待时长 */
transition-delay: 0s;
/* 设置过渡速度曲线 linear线性匀速 */
transition-timing-function: linear;
}
div:hover{
width: 200px;
background-color: pink;
}
img{
width: 150px;
/* 设置过渡效果 */
/* 过渡属性简写: transition:property duration timing-function delay */
/* transition: width 2s linear 0s; */
/* 设置图片缩放比例过渡 transform(形变 移动 旋转 缩放) */
transition: transform 2s ease-in 0s;
}
img:hover{
/* width: 250px; */
transform: scale(1.2);
}
</style>
</head>
<body>
<div></div>
<img src="../Day01/音视频/ad7.jpeg" alt="">
</body>
</html>浏览器运行结果如下：
一个过渡的小案例：
当鼠标悬浮到div块的时候会进行过渡转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.parent{
height: 300px;
background-color: red;
text-align: center;
line-height: 300px;
/* 设置多个属性的过渡 */
transition: font-size 2s linear 0s,color 2s linear 0s,background-color 2s linear 0s;
}
.parent:hover{
font-size: 58px;
color: white;
background-color: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">你好</div>
</div>
</body>
</html>浏览器运行如下：
二、动画
特点：不需要手动触发
需要告诉系统哪一个元素需要动画 动画持续时间
1.定义动画关键帧
@keyframes 动画名称{
动画状态
from{} 开始状态
to{} 结束状态
0%{
}
25%{
}
50%{
}
100%{
}
}
2.给元素设置动画
animation-name 设置动画名称
animation-duration 设置动画持续时间
animation-timing-function 设置动画速度曲线
animation-delay 设置动画等待时长
animation-iteration-count 设置动画迭代次数 number infinite(无限循环)
可以使用如下代码进行测试：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: red;
/* 设置动画名称 */
animation-name: move;
/* 设置动画持续时间 */
animation-duration: 2s;
/* 设置动画速度曲线 */
animation-timing-function: linear;
/* 设置动画等待时长 */
animation-delay: 0s;
/* 设置动画持续次数 */
animation-iteration-count: 1;
/* 设置动画是否反向播放 alternate反向播放 */
animation-direction: alternate;
/* 设置动画应用第几帧 forwards最后一帧 backwards第一帧 */
animation-fill-mode: forwards;
/* 简写 name duration timing-function delay iteration-count direction fill-mode */
animation: move 2s ease-in 0s 1 alternate forwards;
}
div:hover{
/* 设置动画是否暂停 paused暂停 running执行 */
animation-play-state: paused;
}
/* 定义动画关键帧 */
@keyframes move {
0%{
margin-left: 0;
}
25%{
margin-left: 150px;
}
50%{
margin-left: 250px;
}
100%{
margin-left: 350px;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>浏览器运行如下：
动画案例1：
让div中的小方块来回翻转运动并进行变色变形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
animation: move 2s linear infinite alternate;
}
@keyframes move {
from{
transform: translateX(0px) rotate(0deg);
background-color: royalblue;
border-radius: 0;
}
to{
transform: translateX(200px) rotate(360deg);
background-color: pink;
border-radius: 50%;
}
}
</style>
</head>
<body>
<div>/</div>
</body>
</html>浏览器运行如下：
动画案例2：
让图片来进行放大缩小操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
animation: pound 0.1s linear infinite alternate;
}
@keyframes pound {
0%{
/* 不设置任何形变 */
transform: none;
}
100%{
/* 设置缩放>1放大 <1缩小 */
transform: scale(1.2);
}
}
</style>
</head>
<body>
<img width="150px" src="https://ts4.cn.mm.bing.net/th?id=OIP-C.2vp0qW8X2JxAFYcNsyKMCQHaHa&w=250&h=250&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2" alt="">
</body>
</html>浏览器运行如下：
动画案例3：
利用动画来实现轮播图效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
/* 设置一次展示两张图片容器 div */
.parent{
width: 800px;
height: 200px;
border: 1px solid royalblue;
margin: 30px auto;
overflow: hidden;
}
ul{
width: 3000px;
height: 200px;
animation: swipe 8s linear infinite;
}
ul>li{
width: 400px;
height: 200px;
float: left;
}
li>img{
width: 400px;
height: 200px;
}
/* 悬浮到ul 每一个li透明度设置为0.5 */
ul:hover li{
opacity: 0.5;
}
/* 选中哪一个li li透明度设置为100% */
ul li:hover{
opacity: 1;
}
@keyframes swipe {
from{
margin-left: 0;
}
to{
margin-left: -1600px;
}
}
</style>
</head>
<body>
<div class="parent">
<ul>
<li><img src="./images/ad7.jpeg" alt=""></li>
<li><img src="./images/ad8.jpg" alt=""></li>
<li><img src="./images/ad9.jpeg" alt=""></li>
<li><img src="./images/ad10.jpg" alt=""></li>
<li><img src="./images/ad7.jpeg" alt=""></li>
<li><img src="./images/ad8.jpg" alt=""></li>
</ul>
</div>
</body>
</html>浏览器运行如下：
