月兔吃月饼css动画👀

我正在参加中秋创意投稿大赛，详情请看：中秋创意投稿大赛

前言

中秋节当然要吃月饼啦！住在月亮上的小兔子已经梦见了冰皮月饼、水果月饼、杂粮月饼、鲜花月饼，还有莲蓉双黄月饼😜

中秋css动画好难想啊，我这个比较简单，在这个中秋特效中主要使用了轮播月饼的动画以及文字缓慢出现的动画 首先是5个透明背景的小月饼轮流被吃掉（ps抠出来的🤓） 很可惜的是我没有能解决月饼被吃掉消失时的......有亿点点奇怪🤦‍♀️

代码

代码贴在这里 这是放月饼图片的地方

<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>

这是设置图片样式以及轮播的css代码 就是从左边往右边移动，然后无限循环

* {
    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;
    }
}

然后就是文字了(但愿人长久,千里共婵娟)，做的比较简单,就是将文字缓慢显示出来

<div class="textBox">
    <div id="oneText">但愿人长久</div>
    <div id="twoText">千里共婵娟</div>
</div>

css代码

.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;
}

ending

最后，中秋节快到了，嫦娥姐姐要给月亮上给小兔子做月饼啦，提前祝大家中秋节快乐，都能和家人欢聚一堂, 吃好吃的月饼🍻🍻🍻