css3动画实现吃豆豆效果

最新推荐文章于 2024-07-25 10:45:42 发布

MF..

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量248

点赞数 1

分类专栏：项目问题点文章标签： css3 css html

本文链接：https://blog.csdn.net/weixin_47491610/article/details/126424700

版权

项目问题点专栏收录该内容

3 篇文章 0 订阅

订阅专栏

css3动画实现吃豆豆效果

实现效果：
在这里插入图片描述

HTML

   <div class="box">
   	<span></span>
   </div>

CSS

// 外侧边框
.box {
    display: flex;
   	align-items: center;
    margin: 100px auto;
    width: 500px;
    height: 120px;
    border: 1px solid #ccc;
    
    // 豆豆
    span {
        display: flex;
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: orange;
        animation: 4s go linear infinite;

		// 大嘴
        &::before {
            content: '';
            border: 50px solid transparent;
            border-right-color: #fff;
            animation: 1s eat linear infinite;
        }
		
		// 眼睛
        &::after {
            position: absolute;
            content: '';
            width: 20px;
            height: 20px;
            left: 30px;
            top: 20px;
            border-radius: 50%;
            background-color: #fff;
        }

		// 豆豆的运动
        @keyframes go {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(400px) rotate(0);
            }
            51% {
                transform: translateX(400px) rotateY(180deg) ;
            }
            100% {
                transform: translateX(0) rotateY(180deg);
            }
        }
		
		// 豆豆吃东西
        @keyframes eat {
            0% {
                transform: rotateX(90deg);
            }
            100% {
                transform: rotateX(800deg);
            }
        }
    }
}