CSS动画案例6

一、介绍

本节内容我们来仿照一个网站（戳我进网站）的进入页面时的doing动画部分，首先是大标题从最小变为最大，然后是副标题从下向上走，最后是按钮的抖动。
如下图所示：
在这里插入图片描述

二、静态页面的布局

1.HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>banner</title>
    <link rel="stylesheet" href="./icon2/iconfont.css">

</head>

<body>
    <div class="app">
        <div class="title">
            <!-- 最大的标题  -->
            <p>
                We’re the Current
            </p>
            <p> Specialist!</p>
        </div>
         <!-- 副标题 -->
        <i class="desc">keeping you wired</i>
        <!-- 按钮 -->
        <div class="btn">
            <!-- 按钮上的icon图标 -->
            <i class="iconfont icon-0-42"></i>
            <span>Knoe More</span>
        </div>
    </div>
</body>

</html>

2.CSS


    <style>
/*        去除P标签的默认样式*/
        p {
            margin: 0;
            padding: 0;
        }
/*        设置最大盒子的宽和高，*/
        .app {
            width: 100%;
            height: 667px;
/*            让其水平居中显示*/
            margin: 0 auto;
/*            设置背景图片*/
            background: url(./img/banner.jpg) no-repeat center center;
/*            背景图片的大小*/
            background-size: 100% 100%;
/*            使用flex布局，让他的内部水平垂直都居中*/
            display: flex;
            align-items: center;
            justify-content: center;
/*            设置flex样式*/
            flex-direction: column;
/*            设置字体颜色为白色*/
            color: white;

        }
/*        设置标题字体大小，以及加粗，让其水平居中显示*/
        .title {
            font-size: 50px;
            font-weight: bold;
            text-align: center;

        }
/*        设置副标题的样式*/
        .desc {
            font-size: 40px;
            font-weight: 100;
            margin-top: 20px;

        }
/*        设置按钮的样式*/
        .btn {
/*            宽和高*/
            width: 124px;
            height: 32px;
/*            内边距*/
            padding: 12px 30px 17px 30px;
/*            背景颜色*/
            background-color: rgb(244, 118, 41);
/*            圆角*/
            border-radius: 8px;
/*            距离顶部的距离*/
            margin-top: 20px;
/*            字体大小，以及加粗样式*/
            font-size: 16px;
            font-weight: bold;
/*            使用flex布局*/
            display: flex;

        }

    


        /*设置字体与icon图标的距离*/
        .btn>span {
            display: block;
            margin-left: 2px;
            margin-top: 8px;
        }
/*        设置icon的字体大小，以及距离顶部的距离*/
        .icon-0-42 {
            font-size: 30px;
            margin-top: 5px;
        }

    </style>

到这里的话我们就完成了静态页面的基础布局接下来我们来看一下交互效果。

三、动画交互

  /*  设置标题字体大小，以及加粗，让其水平居中显示*/
        .title {
            font-size: 50px;
            font-weight: bold;
            text-align: center;
/*            缩放为0（0帧时为0）*/
            transform: scale(0);
/*            设置动画*/
            animation: title .8s linear forwards;
        }
/*        设置副标题的样式*/
        .desc {
            font-size: 40px;
            font-weight: 100;
            margin-top: 20px;
/*            向下平移50px*/
            transform: translateY(50px);
/*            设置透明度*/
            opacity: 0;
            /*添加动画*/
            animation: desc .5s linear forwards;
        }
     .btn {
/*            宽和高*/
            width: 124px;
            height: 32px;
/*            内边距*/
            padding: 12px 30px 17px 30px;
/*            背景颜色*/
            background-color: rgb(244, 118, 41);
/*            圆角*/
            border-radius: 8px;
/*            距离顶部的距离*/
            margin-top: 20px;
/*            字体大小，以及加粗样式*/
            font-size: 16px;
            font-weight: bold;
/*            使用flex布局*/
            display: flex;
/*            设置开始透明度为0*/
            opacity: 0;
/*            添加动画*/
            animation: btn linear .5s .5s forwards;
        }
/*        标题动画*/

        @keyframes title {
            0% {}

            100% {
/*                0帧为默认，100%让其显示*/
                transform: scale(1);
            }
        }
        /*副标题动画*/
        @keyframes desc {
            /*0帧为默认，100%让其显示透明度为1，垂直移动距离为0*/
            0% {}

            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
/*        按钮的动画*/
        @keyframes btn {
              /*0帧为默认，25%让其显示透明度为0.5,缩放为0.9，50%透明度为1，缩放为1原始大小，75%透明度为1，缩放为0.9，100%让其显示透明度为1，缩放为1原始大小，这样就实现了按钮的抖动*/
            0% {}

            25% {
                opacity: .5;
                transform: scale(.9);
            }

            50% {
                opacity: 1;
                transform: scale(1);
            }

            75% {
                opacity: 1;
                transform: scale(.9);
            }

            100% {
                opacity: 1;
                transform: scale(1);
            }
        }