简单的小动画—贪吃球

ForgttenOne

于 2023-04-28 11:42:13 发布

阅读量194

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/ForgttenOne/article/details/130422757

版权

该文章展示了如何使用HTML和CSS创建一个包含动态阴影效果的盒子以及两个旋转的圆形元素。通过定义关键帧动画`@keyframes`，实现了从不同位置的阴影平滑过渡，以及球形元素的顺时针和逆时针旋转。这些效果是通过`animation`属性应用到相应的元素上实现的。

摘要由CSDN通过智能技术生成

Html

<div class="boxName">
   <div class="box"></div>
   <div class="ball">
      <p></p>
      <p></p>
   </div>
 </div>

添加关键帧

@keyframes boxFram {
    from {
        box-shadow: 200px 0 0 -40px rgb(223, 96, 166),
                    300px 0 0 -40px rgb(223, 96, 166),
                    400px 0 0 -40px rgb(223, 96, 166),
                    500px 0 0 -40px rgb(223, 96, 166);
    }
    to {
        box-shadow: 100px 0 0 -40px rgb(223, 96, 166),
                    200px 0 0 -40px rgb(223, 96, 166),
                    300px 0 0 -40px rgb(223, 96, 166),
                    400px 0 0 -40px rgb(223, 96, 166);
    }
}
@keyframes ball1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-20deg);
    }
}
@keyframes ball2 {
    from {
        transform: rotate(0deg);
    }
    to {
       transform: rotate(20deg);
    }
}

Css样式

.boxName {
    display: flex;
    width: 100%;
    min-height: 100px;
    margin-top: 20px;
}
.boxName .box {
    width: 100px;
    height: 100px;
    background: rgba(0,0,0,0);
    border-radius: 50%;
    animation: boxFram 2s linear infinite;
}
.boxName .ball {
    width: 100px;
    height: 100px;
}
.boxName .ball p{
    width: 100%;
    height: 50%;
    background: #e24f4f;
}
.boxName .ball p:nth-child(1) {
    border-radius: 50px 50px 0 0;
    animation: ball1 1s linear alternate infinite;
}
.boxName .ball p:nth-child(2) {
    border-radius: 0 0 50px 50px;
    animation: ball2 1s linear alternate infinite;
}