Let’s start with a rendering

Making the address

Then take it step by step

First, an animation of the groom who just appeared



.w-m img{
    margin-right: 0;
    float: right;
    margin-top: 60px;
    animation: toWoman 0.5 s ease .5s both;
}
@keyframes toWoman{
    0%{
        opacity: 0;
        transform: translate(-200px);
    }
    100%{
        opacity: 1;
        transform: translate(0); }}Copy the code

It uses the knowledge point:

  • Animation: a shorthand property that sets six animation properties

    • Animation-name specifies the name of the keyframe to bind to the selector

    • Animation-duration Specifies how long it takes to complete the animation, in seconds or milliseconds

    • Animation-timing-function Specifies the speed curve of the animation

    • Animation-delay Specifies the delay before the animation starts

    • Animation-rotund-count specifies the number of times an animation should play

    • Animation-direction Specifies whether the animation should be rotated backwards

  • Keyframes: Allows the developer to control the middle of a CSS animation by specifying the keyframe styles (or pauses) that must be displayed at certain points in the animation. This allows the developer to control more of the details of the animation rather than letting the browser handle them automatically

  • Transform Applies 2D or 3D transformations to elements. This property allows you to rotate, scale, move, or tilt elements

Specific url of the above picture

And then the CSS for that flower



.w-f{
    position: absolute;
    z-index: 20;
    left: 50%;
    margin-left: -30px;
    margin-top: 75px;
}
.w-f img{
    width: 60px;
    animation: show 0.4 s ease 1s both;
}

@keyframes show{
    0%{
        opacity: 0;
        transform: scale(0.1, 0.1); 100%} {opacity: 1;
        transform: scale(1,1);
    }
}
Copy the code

Text section CSS



.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); }}Copy the code

Text side fireworks effect



.w-t img{
    opacity: 0;
    animation: bloom 2s ease 1.2 s infinite;
}
.w-t img.boom2{
    float: right;
    animation: bloom 2s ease 1.5 s infinite;
}
.w-t img.boom3{
    position: absolute;
    margin-top: 40px;
    animation: bloom 2s ease 1.4 s infinite;
}
@keyframes bloom{
    0% {
        transform: scale(0,0);
    }
    100% {
        opacity: 1;
        transform: scale(1,1);
    }
}
Copy the code

The effect of the last few flowers



.w-fls{
    width: 820px;
    margin: 0 auto;
}
.w-fls img{
    height: 120px;
    z-index: 400;
    animation: showFlows 0.4 s ease 2.3 s both;
}
@keyframes showFlows{
    0%{
        opacity: 0;
        transform: translate(0,200px);
    }
    100%{
        opacity: 1;
        transform: translate(0); }}.w-2{
    margin-top: -130px;
    padding-left: 100px;
}
.w-2 img{
    animation: showFlows 0.4 s ease 2.7 s both;
}
Copy the code

The last

There is a girl studying coding together with the one in my profile picture, so that we can make progress together