css3过渡与动画

前言
过渡
- 过渡的基本使用 transition
- - 兼容性
  - transition属性基本使用
  - 哪些属性可以参与过渡
  - all
  - 过渡的四个小属性
- 过渡的缓动效果
- - 常用缓动参数
  - 贝塞尔曲线
- 过渡效果实战
动画
- 动画的定义和调用
- - 动画的执行次数
- 动画效果实战
案例：发光的灯泡
案例：飞行的火箭
结语

前言

在数字时代，网页不再是静态的画面，而是充满活力和动感的空间。CSS3的过渡与动画技术就像是一场魔法表演，能够赋予网页以生命。本文将引领你进入这个奇妙的世界，解锁CSS3过渡与动画的神奇效果。

过渡

过渡的基本使用 transition

transition过渡属性时css3浓墨重彩的特性，过渡可以为一个元素在不同样式之间变化自动添加“补间动画”
在这里插入图片描述

兼容性

过渡从IE10开始兼容，移动端兼容良好
曾几何时，网页上的动画特效基本都是由JavaScript定时器实现的，现在逐步改为使用css3过渡
优点：动画更细腻，内存开销小

transition属性基本使用

在这里插入图片描述
注意，这里的1s、0s里的s不能省略

哪些属性可以参与过渡

所有数值类型的属性，都可以参与过渡，比如width.height、left、top、border-radius
背景颜色和文字颜色都可以被过渡
所有变形（包括2D和3D）都能被过渡

all

如果要所有属性都参与过渡，可以写all

transition:all 1s linear 0s;

注意：不要滥用，会引发效益问题

过渡的四个小属性

在这里插入图片描述

过渡的缓动效果

transition 的第三个参数就是缓动参数，也是变化速度曲线

常用缓动参数

在这里插入图片描述

贝塞尔曲线

网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数

transition:width 1s cubic-bezier(.44,-0.62,.62,1.59) 0s;

过渡效果实战

在这里插入图片描述
过渡效果实战_当鼠标移到图片上显示标题

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}ul li {list-style: none;}img {vertical-align: middle;}.box {margin: 100px auto;width: 500px;}.box ul {display: flex;}.box ul li {position: relative;margin-right: 20px;}.box ul li img {width: 200px;}.box ul li .info {position: absolute;bottom: 0;text-indent: 1em;left: 0;width: 100%;height: 35px;line-height: 35px;background: rgba(0, 0, 0, .7);color: #fff;opacity: 0;transition: opacity .5s linear 0s;}.box ul li:hover .info {opacity: 1;}
</style><body><div class="box"><ul><li><img src="images/01.webp" alt=""><div class="info">美景标题</div></li><li><img src="images/02.webp" alt=""><div class="info">美景标题</div></li></ul></div></body></html>

在这里插入图片描述
过渡效果实战_当鼠标移上去背景旋转自身放大

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}ul li {list-style: none;}.box {margin: 100px auto;width: 600px;}.box ul {display: flex;}.box ul li::before {content: '';display: block;height: 100%;position: absolute;left: 0;top: 0;width: 100%;z-index: 1;transform: rotate(0);transition: transform 1s linear 0s;}.box ul li:nth-child(1)::before {background: url(images/a_1.png) no-repeat center;}.box ul li:nth-child(2)::before {background: url(images/a_2.png) no-repeat center;}.box ul li:nth-child(3)::before {background: url(images/a_3.png) no-repeat center;}.box ul li:nth-child(4)::before {background: url(images/a_4.png) no-repeat center;}.box ul li {width: 107px;height: 107px;position: relative;text-align: center;margin-right: 20px;}.box ul li img {width: 50px;position: relative;z-index: 2;margin-top: 30px;transform: scale(1);transition: transform .5s ease 0s;}/* 背景圆环旋转一周 */.box ul li:hover::before {transform: rotate(360deg);}/* 中心图标放大1.2倍 */.box ul li:hover img {transform: scale(1.2);}
</style><body><div class="box"><ul><li><img src="images/icon1.svg" alt=""></li><li><img src="images/icon2.svg" alt=""></li><li><img src="images/icon3.svg" alt=""></li><li><img src="images/icon4.svg" alt=""></li></ul></div></body></html>

在这里插入图片描述
过渡效果实战_当鼠标移到图片上小狗打开里面是小猫

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}.box {position: relative;width: 500px;margin: 50px auto;perspective: 1000px;}.box img {border: 1px solid #000;width: 120px;border-radius: 100px;}.dog {position: absolute;left: 0;top: 0;transform-origin: 0 0;transform: rotate(0);transition: transform 2s ease 0s;}.box:hover .dog {cursor: pointer;transform: rotateY(-180deg);}.n1 .dog {transform-origin: 100% 100%;}.n1:hover .dog {transform: rotateY(180deg);}.n2 .dog {transform-origin: 0 0;}.n2:hover .dog {transform: rotateX(-180deg);}
</style><body><div class="box"><img class="cat" src="images/cat.jpg" alt=""><img class="dog" src="images/dog.jpg" alt=""></div><div class="box n1"><img class="cat" src="images/cat.jpg" alt=""><img class="dog" src="images/dog.jpg" alt=""></div><div class="box n2"><img class="cat" src="images/cat.jpg" alt=""><img class="dog" src="images/dog.jpg" alt=""></div></body></html>

在这里插入图片描述
旋转的正方形

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width,initial-scale=1, user-scalable=no, maximum-scale=1,minimum-scale=1"><!-- width=device-width, initial-scale=1.0 页面的宽度应该等于设备的宽度，并且初始缩放级别为 1.0。这有助于确保在移动设备上以正常大小呈现页面，而不是被过度缩放。 --><title>Document</title><style>* {margin: 0;padding: 0;}section {width: 202px;height: 202px;margin: 200px auto;perspective: 10000px;}.box1 {width: 202px;height: 202px;perspective: 10000px;position: relative;/* 设置变形类型，保留它内部的3D效果 *//* 这个box盒子又是舞台，又是演员，这个box整体带着里面的p旋转 */transform-style: preserve-3d;transition: all 10s ease 0s;}section:hover .box1 {transform: rotateX(360deg) rotateY(360deg);}p {width: 200px;height: 200px;position: absolute;top: 0;left: 0;}.box1 p:nth-child(1) {background: rgb(62 255 244 / 73%);/* 前面 */transform: translateZ(100px)}.box1 p:nth-child(2) {background: rgba(242, 255, 62, 0.959);/* 顶面 */transform: rotateX(90deg) translateZ(100px)}.box1 p:nth-child(3) {background: rgba(65, 62, 255, 0.73);/* 背面 */transform: rotateX(180deg) translateZ(100px)}.box1 p:nth-child(4) {background: rgba(62, 255, 120, 0.73);/* 底面 */transform: rotateX(-90deg) translateZ(100px)}.box1 p:nth-child(5) {background: rgb(255, 122, 34);/* 侧面 */transform: rotateY(90deg) translateZ(100px)}.box1 p:nth-child(6) {background: rgba(255, 62, 72, 0.73);/* 侧面 */transform: rotateY(-90deg) translateZ(100px)}</style>
</head><body><section><div class="box1"><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p></div></section></body></html>

动画

动画的定义和调用

可以使用@keyframes来定义动画，keyframes表示“关键帧”，在项目上线前，要补上@-webkit-这样的私有前缀
在这里插入图片描述
定义动画之后，就可以使用animation属性调用动画

动画的执行次数

第五个参数就是动画的执行次数

animation:r 1s linear 0s 3;  //3表示次数

如果想永远执行可以写infinite

animation:r 1s linear 0s infinite;  //表示一直执行动画

如果想让动画的第2、4、6……偶数次自动逆向执行，那么要加上alternate参数即可

animation:r 1s linear 0s infinite alternate;

如果想让动画停止在最后结束状态，那么要加上forwards

animation:r 1s linear 0s forwards;

动画效果实战

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}.box {width: 200px;height: 200px;margin: 100px auto;background-color: orange;animation: r 3s linear 0s infinite;}.box1 {width: 200px;height: 200px;background-color: blue;animation: move 1s linear 0s infinite alternate;margin-bottom: 20px;}.box2 {width: 200px;height: 200px;background-color: green;animation: radius 1s linear 0s forwards;margin-bottom: 20px;}@keyframes r {from {transform: rotate(0);}to {transform: rotate(360deg);}}@keyframes move {from {transform: translateX(0)}to {transform: translateX(300px)}}@keyframes radius {from {border-radius: 0;}to {border-radius: 100px;}}
</style><body><div class="box"></div><div class="box1"></div><div class="box2"></div></body></html>

案例：发光的灯泡

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {margin: 0;padding: 0;}.box {position: relative;margin: 100px;text-align: center;width: 200px;height: 200px;}.faguang {position: absolute;left: -70px;top: -60px;animation: faguang .5s linear 0s infinite alternate;}@keyframes faguang {0% {opacity: 1;}100% {opacity: 0;}}
</style><body><div class="box"><img class="depao" src="images/dengpao.png" alt=""><img class="faguang" src="images/guang.png" alt=""></div></body></html>

案例：飞行的火箭

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>* {padding: 0;margin: 0;}.hj {position: absolute;left: 400px;top: 400px;animation: fly .3s ease-in 0s infinite alternate;}.line {position: absolute;width: 1px;height: 150px;background: #f00;left: 400px;top: 400px;animation: linefly 1s linear 0s infinite;opacity: 0;transform: rotate(45deg)}.line1 {position: absolute;width: 1px;height: 150px;background: #f00;left: 500px;top: 400px;animation: linefly 1s linear .4s infinite;opacity: 0;transform: rotate(45deg)}.line2 {position: absolute;width: 1px;height: 200px;background: #f00;left: 600px;top: 400px;animation: linefly 1s linear .8s infinite;opacity: 0;transform: rotate(45deg)}.line3 {position: absolute;width: 1px;height: 100px;background: #f00;left: 700px;top: 300px;animation: linefly 1s linear .8s infinite;opacity: 0;transform: rotate(45deg)}@keyframes linefly {0% {opacity: 0;transform: rotate(45deg) translateY(-300px);}50% {opacity: 1;}100% {opacity: 0;transform: rotate(45deg) translateY(300px);}}@keyframes fly {from {transform: translateX(20px) translateY(20px);}to {transform: translateX(-20px) translateY(-20px);}}
</style><body><div class="hj"><img src="images/huojian.png" alt=""></div><div class="line"></div><div class="line1"></div><div class="line2"></div><div class="line3"></div></body></html>