css实现一个表白求婚动画效果代码-html代码-BFW代码库

css实现一个表白求婚动画效果代码

代码语言：html

所属分类：表白

代码描述：css实现一个表白求婚动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <meta charset="utf-8">
    <style>
        /*top 烟花字体 */
    .w-t{
        margin: 100px auto;
        width: 500px;
    }
    .w-t img{
        opacity: 0;
        animation: bloom 2s ease 1.2s infinite;
    }
    .w-t img.boom2{
        float: right;
        animation: bloom 2s ease 1.5s infinite;
    }
    .w-t img.boom3{
        position: absolute;
        margin-top: 40px;
        animation: bloom 2s ease 1.4s infinite;
    }
    @keyframes bloom{
        0% {
            transform: scale(0,0);
        }
        100% {
                opacity: 1;
            transform: scale(1,1);
        }
    }
    .w-t-m{
        position: absolute;
        left: 50%;
        z-index: 10;
        line-height: 80px;
        color: #ff720a;
        letter-spacing: 5px;
        opacity: 0;
        animation: titleBloom 1s linear 1s both;
        font-size: 26px;
        margin-left: -125px;
    }
    @keyframes titleBloom{
        0% {
            transform: translate(-50px);
        }
        100% {
                opacity: 1;
            transform: translate(0);
        }
    }
    /*人物类 */
    .w-p{
        margin: -50px auto;
        width: 1000px;
        overflow: hidden;
    }
    .w-m{
        float: left;
        width: 50%;
    }
    .w-m img{
        margin-right: 0;
        float: right;
        margin-top: 60px;
        animation: toWoman 0.5s ease .5s both;
    }
    @keyframes toWoman{
        0%{
                opacity: 0;
                transform: translate(-200px);
        }
        100%{
                opacity: 1;
                transform: translate(0);
        }
    }
    .w-w{
        float: right;
        width: 50%;
    }
    .w-w img{
        margin-left: 0;
        float: left;
        animation: showW 0.8s ease 0s both;
    }
    @keyframes showW{
        0%{
                opacity: 0;
        }
        100%{
                opacity: 1;
        }
    }
    .w.........完整代码请登录后点击上方下载按钮下载查看