前端小技巧（三）：愤怒的小鸟CSS版

/*----无忧----*/

于 2019-07-19 16:47:16 发布

阅读量322

点赞数 1

分类专栏：前端小技巧

本文链接：https://blog.csdn.net/q213546879/article/details/96484162

版权

本文分享了如何使用CSS技巧创建一个愤怒的小鸟动画效果，通过详细的步骤和代码示例，展示前端开发者如何利用CSS动画和精灵图技术实现这一经典游戏的视觉呈现。

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

先看效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .main{
            width: 500px;
            height: 500px;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .box{
            width: 500px;
            height: 500px;
            background: #000;
            border-radius: 45% 55% 45% 55%/ 55% 50% 50% 45%;
            box-shadow: inset -10px 5px 35px 10px rgba(255,255,255,0.3);
            overflow: hidden;
            position: relative;
        }

        .box:before{
            content: '';
            w