@keyframes实现页面动画效果

最新推荐文章于 2024-04-24 19:48:54 发布

代码编编◐

最新推荐文章于 2024-04-24 19:48:54 发布

阅读量1k

点赞数 1

分类专栏：笔记文章标签： html5 css3 css html

本文链接：https://blog.csdn.net/wqy18378671261/article/details/117636908

版权

笔记专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS3动画本质上是增强的过渡。
CSS3动画基于关键帧，动画的定义分两部分定义的。
（1）使用 @keyframes 规则创建一个动画，用于定义应用动画的属性；
（2）在样式声明时，使用 animation 及其相关属性调用关键帧以实现动画。

使用**@keyframes**规则创建动画的语法格式：

语法格式1：

/*指定关键帧组的名字以方便后面调用*/ 
@keyframes 关键帧组名{ 
/*初始效果*/ 
from{起始样式属性值 } 
/*结束状态*/ 
to{ 结束样式属性值 } }

语法格式2：

@keyframes 关键帧组名{ 
0%{ 样式属性值 } ... 
50%{ 样式属性值 } ... 
100%{ 样式属性值 } }

样式声明时，使用animation及其相关属性调用关键帧以实现动画。

语法格式：animation：关键帧组名持续时间动画速度延迟时间播放次数
属性如下：
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动画</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 100px;
            height: 100px;
            background: #5fff67;
        }
        .box:hover{
            /* 限制边框阴影 */
            box-shadow: 0 0 5px #000000;
            /* background: khaki; */

            /* 
                [如果想要重复播放，可以使用infinite（‘无限’的意思）]
                animation所有整合的样式使用： 
                animation: 关键频组名 持续时间 动画速度 延迟时间 播放速度
            */
            /* animation: ani-move 1000ms linear 100ms infinite; */
            /* animation: animation-move 2s linear 100ms infinite; */

            /* 拆分使用 */
            /* 1.动画名称 */
            animation-name: animation-move;
            /* 2.动画持续时间 */
            animation-duration: 2s;
            /* 3.动画速度 */
            animation-timing-function: linear;
            /* 4.动画持续时间 */
            animation-delay: 100ms;
            /* 5.播放次数 */
            animation-iteration-count: infinite;
        }

        /* 定义动画规则   @keyframes 动画名称{} */
        @keyframes ani-move{
            from{
                background: red;
                box-shadow: 0 0 5px black;
            }
            to{
                background: yellow;
                box-shadow: 0 0 5px blue;
            }
        }

        /* 百分比动画的使用 */
        @keyframes animation-move{
            0%{
                background: red;
                box-shadow: 0 0 5px black;
            }
            50%{
                background: yellow;
                box-shadow: 0 0 5px blue;
            }
            100%{
                background:blue;
                box-shadow: 0 0 5px green;
                width: 150px;
                height: 150px;
                border-radius: 50%;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

代码编编◐

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
@keyframes实现页面动画效果

CSS3动画本质上是增强的过渡。CSS3动画基于关键帧，动画的定义分两部分定义的。（1）使用 @keyframes 规则创建一个动画，用于定义应用动画的属性；（2）在样式声明时，使用 animation 及其相关属性调用关键帧以实现动画。使用@keyframes规则创建动画的语法格式：语法格式1：/*指定关键帧组的名字以方便后面调用*/ @keyframes 关键帧组名{ /*初始效果*/ from{起始样式属性值 } /*结束状态*/ to{ 结束样式属性值 } }语法格式
复制链接

扫一扫