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;
过渡效果实战
过渡效果实战_当鼠标移到图片上显示标题
美景标题
美景标题
过渡效果实战_当鼠标移上去背景旋转自身放大
过渡效果实战_当鼠标移到图片上小狗打开里面是小猫
旋转的正方形
content="width=device-width,initial-scale=1, user-scalable=no, maximum-scale=1,minimum-scale=1">
动画
动画的定义和调用
可以使用@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;
动画效果实战
案例：发光的灯泡
案例：飞行的火箭
结语
通过深入学习CSS3的过渡与动画技术，你将能够为网页设计注入更多创意和动感。这不仅是技术的提升，更是对设计艺术的追求。让我们一同在动感的舞台上展示创意，用过渡与动画让网页焕发生机。
好文链接
您阅读本篇文章共花了： 大家都在找：
css3：css3下载
前端：前端开发需要学什么
css：css背景颜色渐变
发表评论