css动画案例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_65450681/article/details/144092985

一、介绍

本篇博客仿照一个绿色手机网站制作一些动画效果WebApp - 绿色手机软件官网模板 App Saas网站HTML模板 - 在线预览http://www.jqueryfuns.com/resource/view/1567

案例一：

二、思路分析

首先布局方面是左右布局，可以使用float浮动布局，也可以使用flex布局，左侧是两部手机，是交叠着的我们可以通过定位来实现，右边布局就是从上向下依次进行的。
接下来就是左边手机部分的一个划入效果，通过定位left让其默认位置距离左侧一段距离，50px(都可以)，设置零帧为完全透明
设置动画让其位置回到原位置，透明度为1
右侧部分有一个向上划入的效果但时间不同可以通过设置延时实现。

三、HTML代码

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

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

<body>
    <div class="phone">
        <!-- 左侧部分 -->
        <div class="left">
            <img src="./img/phone-white.png" class="phone_img1" alt="">
            <img src="./img/phone-black.png" class="phone_img2" alt="">

        </div>
        <!-- 右侧部分 -->
        <div class="right">
            <h1>Suspendisse nec venenatis dolor</h1>
            <p>Suspendisse a arcu efficitur erat auctor viverra. Morbi molestie arcu vitae dolor mollis iaculis.
                Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempor vulputate massa eget
                luctus. Suspendisse a arcu efficitur erat auctor viverra. Morbi molestie arcu vitae dolor mollis
                iaculis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse tempor vulputate
                massa eget luctus.
            </p>
            <div class="text_list">
                <p>
                    <img src="./img/image.png" alt="">
                    <span>100%</span> Nullam et quam sapien.
                </p>
                <p>
                    <img src="./img/image.png" alt="">
                    <span>128</span> Fusce ut tempus arcu
                </p>
                <p>
                    <img src="./img/image.png" alt="">
                    <span>10GB</span> Phasellus suscipit massa a luctus scelerisque
                </p>
                <p>
                    <img src="./img/image.png" alt="">
                    <span>Free!</span> Nunc commodo dui sit amet nibh ornare efficitur
                </p>
            </div>

            <div class="phone_btn">
                <div class="phone_btn1">
                    <i class="iconfont icon-biaoqian"></i>
                    OUT PIRICING
                </div>
                <div class="phone_btn2">
                    <i class="iconfont icon-dengpao"></i>
                    READ FAQ
                </div>
            </div>
        </div>
    </div>
</body>

</html>

四、css代码

.phone_btn1{
    /* 底部按钮 */
    width: 150px;
    height: 40px;
    color: white;
    font-size: 12px;
    text-align: center;
    line-height: 40px;
    background-color: rgb(86, 204, 145);
    border-radius: 3px;
    border: 2px solid rgb(86, 204, 145);
    /* 划入过渡 */
    transition: all .5s;
}
.phone_btn1:hover{
    /* 划入效果 */
    background-color: white;
    color: rgb(86, 204, 145);
}
.phone_btn2{
    /* 第二个按钮 */
    text-align: center;
    line-height: 40px;
    width: 150px;
    height: 40px;
    border: 2px solid rgb(216, 216, 216);
    border-radius: 3px;
    color: rgb(216, 216, 216);
      /* 划入过渡 */
    transition: all .5s;
}
.icon-dengpao{
    color:rgb(86, 204, 145) ;
}
.phone_btn2:hover{
        /* 划入效果 */
    color: rgb(86, 204, 145);
    border:  2px solid rgb(86, 204, 145);
}

运行结果