一、过渡
特点： 元素发生改变不会立即生效
过渡需要手动触发 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>
浏览器运行如下：
