CSS3动画

关忆北_

已于 2023-11-22 15:59:07 修改

阅读量134

点赞数

分类专栏： CSS 文章标签： css3 css 前端

于 2023-11-14 11:23:32 首次发布

本文链接：https://blog.csdn.net/notagoodwriter/article/details/134377064

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章介绍了CSS关键帧动画的实现，包括鼠标滑动触发的旋转动画和默认持续旋转的效果。通过`@keyframes`定义了动画的变化过程，如旋转角度和位置/缩放变化，以及与`animation`属性的关联时间。

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

一. 鼠标滑动到上方时旋转

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

.close {
    position: absolute;
    width: 30px;
    height: 30px;
}

.close:hover {
    animation: rotate 1.4s linear infinite;
}

二. 默认一直旋转

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(720deg);
    }
}

.close {
    width: 30px;
    height: 30px;
    border: 1px solid #000;
    animation: rotate 1.4s linear infinite;
}

三. @keyframes

我们在使用 C3动画 之前首先得定义关键帧动画其意思很明确

0% transform: rotate(0deg) 在最开始时无旋转角度

10% translate(50px, 60px) 在10%这个时间点向 X轴方向移动50px 向 Y轴方向移动60px

20% transform: scale(2) 在20%这个点放大两倍

这个xx%这个时间是根据下方 animation 后方定义的时间相关联的

如：animation 后跟的时间是10s 那么 10% 就是在动画进行到1s的时候做出下方定义的关键帧动画