I am participating in the Mid-Autumn Festival Creative Submission contest, please see: Mid-Autumn Festival Creative Submission Contest for details

preface

Of course we eat moon cakes on Mid-Autumn Festival! The rabbit who lives on the moon has dreamed of ice skin moon cake, fruit moon cake, miscellaneous grain moon cake, flower moon cake, and lotus seed paste double yellow moon cake 😜

Mid-Autumn CSS animation good hard to think of ah, I this is relatively simple, in this Mid-Autumn festival special effects mainly used in the rotation of the moon cake animation and text slowly appear of the animation is the first 5 transparent background of the small moon cake take turns to be eaten (PS cut out 🤓) it is a pity that I can not solve the moon cake was eaten disappear…… There are hundreds of millions of strange 🤦♀️

code

The code is posted here and this is where you put the moon cake pictures

<div class="imgsBox">
    <ul>
        <li><img src="./img/moonCake1.png"></li>
        <li><img src="./img/moonCake2.png"></li>
        <li><img src="./img/moonCake3.png"></li>
        <li><img src="./img/moonCake4.png"></li>
        <li><img src="./img/moonCake5.png"></li>
    </ul>
</div>
Copy the code

This is the CSS that sets the image style and the rotation and just moves from left to right, and then loops forever

* {
    margin: 0;
    padding: 0;
}
.Box {
    width: 100%;
    height: 575px;
    background-image: url('.. /img/bgc3.png');
    background-size: 100% 100%;
}
.imgsBox {
    width: 925px;
    height: 200px;
    overflow: hidden;
    margin-left: 0px;
}
ul {
    width: 1600px;
    height: 200px;
    animation: change 4s linear 0s infinite normal;
}
ul:hover {
    animation-play-state: paused;
}
ul:hover li {
    opacity: 0.5;
}
ul li:hover {
    opacity: 1;
}
ul li {
    width: 200px;
    height: 200px;
    list-style: none;
    float: left;
    box-sizing: border-box;
}
img {
    width: 100%;
    height: 200px;
}
@keyframes change {
    from {
        margin-left: 0; } to { margin-left: 200px; }}Copy the code

Then is the text (wish people long, chan), do relatively simple, is the text slowly displayed

<div class="textBox">
    <div id="oneText">Long may man be</div>
    <div id="twoText">Even though miles apart</div>
</div>
Copy the code

CSS code

.textBox{
    width: 300px;
    height: 200px;
    font-size: 35px;
    font-family: "KaiTi";
    color: white;
    margin-left: 200px;
    margin-top: 50px;
}
#twoText{
    margin-left: 50px;
    margin-top: 20px;
}
@keyframes  ani{
    0% {opacity:0; }
    100% {opacity:1; }
}
@keyframes  ani2{
    0% {opacity:0; }
    25% {opacity:0; }
    100% {opacity:1; }
}
#oneText{
    animation: ani 8s ease-out 0s infinite normal;
}
#twoText{
    animation: ani2 8s ease-out 0s infinite normal;
}
Copy the code

ending

Finally, the Mid-Autumn Festival is coming, chang ‘e sister to the moon to do moon cakes for rabbit, I wish you a happy Mid-Autumn Festival in advance, can get together with the family, eat delicious moon cakes 🍻🍻🍻