过渡、动画

最新推荐文章于 2024-09-30 09:59:46 发布

chonger_feifei

最新推荐文章于 2024-09-30 09:59:46 发布

阅读量115

点赞数

分类专栏： CSS 文章标签：动画 css3

本文链接：https://blog.csdn.net/chonger_feifei/article/details/123388511

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文深入探讨了CSS的transition和animation属性，详细解释了如何创建细腻的过渡效果和复杂的动画。从过渡的四个属性到缓动函数的设置，再到自定义贝塞尔曲线，全面展示了CSS在视觉动态效果上的强大能力。此外，通过实例展示了如何在实际项目中应用这些技术，包括页面各个部分的开发和动画效果实现。

摘要由CSDN通过智能技术生成

过渡

优点：动画更细腻，内存开销小
4个属性
transition:width 1s linear 0s;
/* 什么属性要过渡动画时长、变化速度曲线、延迟时间 */

可参与过渡的属性

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

缓动

缓动参数
transition的第三个参数是缓动参数，即变化速度曲线
常见的缓动参数
在这里插入图片描述

贝塞尔曲线
网站https://cubic-bezier.com/可以生成贝塞尔曲线，可以自定义动画缓动参数
3）过渡效果实战课

动画

定义@keyframes

keyframes：“关键帧”
项目上线前，要补上@-webkit-这样的私有前缀

/* @keyframes定义动画 */
/* r动画的名字 */
/* from起始状态 */
/* to结束状态 */
@keyframes r {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

调用animation

定义动画之后，使用animation调用

  animation: r 1s linear 0s；

执行次数

第五个参数是执行次数

animation:r 1s linear 0s 3；

infinite 永远执行

animation:r 1s linear 0s infinite；

alternate往复地

例：动画的第2、4、6…（偶数次）自动逆向执行，加上alternate参数

animation: movelr 2s linear 0s infinite alternate；

forwards停止在最后结束状态

animation: changeToCircle 1s linear 0s forwards；

多关键帧动画

/* 多关键帧动画  */
@keyframes changeColor {
    0% {
        background-color: red;
    }
    20% {
        background-color: yellow;
    }
    40% {
        background-color: blue;
    }
    60% {
        background-color: green;
    }
    80% {
        background-color: purple;
    }
    100% {
        background-color: orange;
    }

2）动画效果实战课
仿穷游静态项目
项目起步准备
页面顶部的开发
1）页面顶部的开发
2）字体图标的使用
3）使用CSS制作菜单
页面中部的开发
1）大Banner的布局
2）垂直菜单开发
3）新鲜甩尾部分开发
4）机酒自由行部分开发
5）当地玩乐部分开发
6）公共类的使用
7）过渡和变形在实战中的应用
页面底部的开发