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;

过渡效果实战

过渡效果实战_当鼠标移到图片上显示标题

Document

  • 前端 css3过渡与动画  第1张

    美景标题

  • 前端 css3过渡与动画  第2张

    美景标题

过渡效果实战_当鼠标移上去背景旋转自身放大

Document

  • 前端 css3过渡与动画  第3张
  • 前端 css3过渡与动画  第4张
  • 前端 css3过渡与动画  第5张
  • 前端 css3过渡与动画  第6张

过渡效果实战_当鼠标移到图片上小狗打开里面是小猫

Document

前端 css3过渡与动画  第7张

前端 css3过渡与动画  第8张

前端 css3过渡与动画  第7张

前端 css3过渡与动画  第8张

前端 css3过渡与动画  第7张

前端 css3过渡与动画  第8张

旋转的正方形

content="width=device-width,initial-scale=1, user-scalable=no, maximum-scale=1,minimum-scale=1">

Document

动画

动画的定义和调用

可以使用@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;

动画效果实战

Document

案例:发光的灯泡

Document

前端 css3过渡与动画  第13张

前端 css3过渡与动画  第14张

案例:飞行的火箭

Document

前端 css3过渡与动画  第15张

结语

通过深入学习CSS3的过渡与动画技术,你将能够为网页设计注入更多创意和动感。这不仅是技术的提升,更是对设计艺术的追求。让我们一同在动感的舞台上展示创意,用过渡与动画让网页焕发生机。

精彩文章

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: