CSS动画案例4-EW帮帮网

一、介绍

今天我们继续来看下一个CSS动画案例，这个案例主要是图片以及文本进入时的一个动画状态，以及划入显示背景颜色，交互效果与第一次交互的效果类似，那么我们现在就开始学习吧。那么开始今天的学习吧!本篇博客仿照一个绿色手机网站制作一些动画效果，网站参考（http://www.jqueryfuns.com/resource/view/1567）如下图所示：
在这里插入图片描述

二、基础布局

此次网页布局为三列布局，我们可以通过float或者flex进习布局两种方法都可以。那么接下来我们就开始完成一下网页的基本内容吧！

首先我们需要使用三个盒子，让其均匀分布，可以使用flex布局display:flex，justify-content:space-between居于两侧水平均匀分布。

左侧布局按照从上向下分为三个盒子，每个盒子需要一个标题、描述内容，以及一个icon,icon在右侧，可以使用flex布局也可以使用定位让其在固定位置。

中间盒子放两张图片，使用定位设置其位置，设置层级，让有图片的手机在上面。

右侧布局与左侧布局相同，只需要调整icon位置为左边即可。

那么接下来我们来看，基础布局的代码。

1. HTML

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

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

<body>
    <div class="app">
        <!-- 分为三列布局，左侧布局 -->
        <div class="left">
            <!-- 左侧的第一行内容 -->
            <div class="left1">
                <div class="text">
                    <p>Easy Customization</p>
                    <p>Fusce congue, nibh ut varius volutpat, nisi </p>
                    <p>dolor congue metus</p>
                </div>
                <div class="icon_box">
                    <i class="iconfont icon-dengpao"></i>
                </div>
            </div>
            <!-- 左侧的第二行内容 -->
            <div class="left2">
                <div class="text">
                    <p>24H Online Support</p>
                    <p>Fusce congue, nibh ut varius volutpat, nisi </p>
                    <p>dolor congue metus</p>
                </div>
                <div class="icon_box">
                    <i class="iconfont icon-yuanhuan"></i>
                </div>
            </div>
            <!-- 左侧的第三行内容 -->
            <div class="left3">
                <div class="text">
                    <p>Google Drive, SkyDrive Sync</p>
                    <p>Fusce congue, nibh ut varius volutpat, nisi </p>
                    <p>dolor congue metus</p>
                </div>
                <div class="icon_box">
                    <i class="iconfont icon-yunduanshuaxin
                    "></i>
                </div>
            </div>
        </div>
        <!-- 中间布局 -->
        <div class="middle">
            <img src="./img/device2.png" class="img1" alt="">
            <img src="./img/device1.png" class="img2" alt="">
        </div>
        <!-- 右侧布局 -->
        <div class="right">
            <div class="right1">
                <div class="icon_box">
                    <i class="iconfont icon-xunhuan"></i>
                </div>
                <div class="text">
                    <p>Live Update</p>
                    <p>Fusce congue, nibh ut varius volutpat, nisi </p>
                    <p>dolor congue metus</p>
                </div>

            </div>
            <div class="right2">
                <div class="icon_box">
                    <i class="iconfont icon-yunxiazai
                    "></i>
                </div>
                <div class="text">
                    <p>Cloud HostingCloud Hosting</p>
                    <p>Fusce congue, nibh ut varius volutpat, nisi </p>
                    <p>dolor congue metus</p>
                </div>

            </div>
            <div class="right3">
                <div class="icon_box">
                    <i class="iconfont icon-unlock
                    "></i>
                </div>
                <div class="text">
                    <p>High Security</p>
                    <p>Fusce congue, nibh ut varius volutpat, nisi </p>
                    <p>dolor congue metus</p>
                </div>

            </div>
        </div>
    </div>
</body>

</html>

2.CSS

<style>
 /*去除P标签的默认样式*/
        p {
            margin: 0;
            padding: 0;
        }
        /*设置最外层盒子的宽。让其水平居中，距离顶部100px,flex布局，水平均等分布*/
        .app {
            width: 70vw;
            margin: 100px auto;
            display: flex;
            justify-content: space-between;
        }
        /*设置左右两侧的宽*/
        .left,
        .right {
            width: 20vw;
        }
          /*设置每一行标题下的文字大小，与颜色*/
        .text>p:not(:first-child) {
            font-size: 14px;
            color: rgb(150, 150, 150);
        }
        /*设置么一行内容的标题距离顶部的距离*/
        .text>p:first-child {
            margin-bottom: 10px;
        }
        /*设置左右两侧盒子的最大层div宽继承父级100%，使用flex布局让内容居于两侧均等分布，距离顶部60px*/
        .left>div,
        .right>div {
            width: 100%;
            display: flex;
            justify-content: space-between;
            margin-top: 60px;
        }
        /*设置icon图标的盒子宽和高，让内容水平居中，设置行高与盒子的高相同让其水平居中*/
        .icon_box {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            /*设置距离的顶部的距离*/
            margin-top: 10px;
            /*设置圆角内容为50%让其成为一个圆形*/
            border-radius: 50%;
            /*设置字体的大小，颜色*/
            font-size: 40px;
            color: #56cc91;
      
        }
          /*设置第一张图片的宽，高度让其自适应，设置子级定位为绝对定位，距离顶部左边均为0*/
        .img1 {
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
        
        }
 /*设置第一张图片的宽，高度让其自适应，设置子级定位为绝对定位，距离顶部为0距离左边165px*/
        .img2 {
            width: 200px;
            position: absolute;
            top: 0;
            left: 165px;
          
        }
</style>

那么现在我们再来看一下效果图:
在这里插入图片描述

三、交互效果

1.设置中间图片的动画

设置两张图片的起始位置与样式，水平进行移动，透明度为0

 /*设置第一张图片的宽，高度让其自适应，设置子级定位为绝对定位，距离顶部左边均为0*/
        .img1 {
            width: 200px;
            position: absolute;
            top: 0;
            left: 0;
             /*设置0帧位置为向右水平150px*/
            transform: translateX(150px);
            opacity: 0;
            animation: left .7s linear forwards;
        }
 /*设置第一张图片的宽，高度让其自适应，设置子级定位为绝对定位，距离顶部为0距离左边165px*/
        .img2 {
            width: 200px;
            position: absolute;
            top: 0;
            left: 165px;
            /*设置0帧位置为向左水平150px*/
            transform: translateX(-150px);
            /*设置透明度为0，添加动画*/
            opacity: 0;
            animation: left .7s linear forwards;/*animation:动画名称 持续时间 匀速播放 动画结束时的位置*/
        }
 @keyframes left {
            /*0帧起始位置不变*/
            0% {}
            /*平移为0，透明度为1*/
            100% {
                transform: translateX(0);
                opacity: 1;
            }
        }

2.设置左右两侧每行内容的起始位置与动画

设置左右两侧每行内容的位置与透明度,动画使用与上面相同

 /*设置左侧三行内容0帧起始位置与样式*/
        .left1,
        .left2,
        .left3 {
            transform: translateX(-100px);
            opacity: 0;
            animation: left 1s linear forwards;
        }
         /*设置右侧三行内容0帧起始位置与样式*/
        .right1,
        .right2,
        .right3 {
            transform: translateX(100px);
            opacity: 0;
            animation: left 1s linear forwards;
        }

3.设置左右两侧第二行与第三行的动画延时的时间

 .left2 {
            animation: left 1s .1s linear forwards;/*animation：动画名称 持续时间为1s 延时.1s 匀速播放 结束时的位置*/
        }

        .left3 {
            animation: left 1s .2s linear forwards;/*animation：动画名称 持续时间为1s 延时.2s 匀速播放 结束时的位置*/
        }

        .right2 {
            animation: left 1s .1s linear forwards;
        }

        .right3 {
            animation: left 1s .2s linear forwards;
        }

4.icon划入时的效果

 /*设置icon图标的盒子宽和高，让内容水平居中，设置行高与盒子的高相同让其水平居中*/
        .icon_box {
            width: 60px;
            height: 60px;
            text-align: center;
            line-height: 60px;
            /*设置距离的顶部的距离*/
            margin-top: 10px;
            /*设置圆角内容为50%让其成为一个圆形*/
            border-radius: 50%;
            /*设置字体的大小，颜色*/
            font-size: 40px;
            color: #56cc91;
            /*添加过渡效果。划入时更柔和*/
            transition: all .3s;
        }
         /*添加过渡属性，改变背景颜色与字体颜色*/
        .icon_box:hover {
            background-color: #56cc91;
            color: white;
        }

那么至此我们的交互效果就完成了，来看一下最终结果展示：
在这里插入图片描述

四、结束语

那么今天我们制作的交互案例就到此结束了，大家如果过想要图片练习可以通过顶部的网站进行获取，icon图标通过阿里矢量图进行下载使用就可以了。如果大家想要跟博主继续学习前端的其他知识，可以进入社区：（点击进入社区）社区会不定时发布一些关于前端的基础知识，欢迎大家的加入。那么今天分享的内容就到此结束了，我们下一节内容子再见，希望本篇博客对您有所帮助，再见~

CSS动画案例4

目录