纯css实现夜晚孔明灯放飞动画效果-html代码-BFW代码库

纯css实现夜晚孔明灯放飞动画效果

代码语言：html

所属分类：动画

代码描述：夜晚孔明灯放飞动画效果，纯css实现，无js

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #ece8fc;
        }

        .pill {
            position: relative;
            width: 160px;
            height: 335px;
            background: linear-gradient(to bottom, #312952 0%, #5A4A94 35%, #7B6BC6 100%);
            border-radius: 100px;
            overflow: hidden;
        }

        .lanternHills {
            position: absolute;
            bottom: -1px;
            width: 225px;
            left: -25px;
        }

        .star {
            background-color: white;
            position: absolute;
            border-radius: 50%;
        }

        .star1 {
            width: 3px;
            height: 3px;
            transform: scale(1.1);
            left: 71px;
            top: 225px;
        }

        .star2 {
            width: 3px;
            height: 3px;
            transform: scale(1.1);
            left: 62px;
            top: 11px;
        }

        .star3 {
            width: 1px;
            height: 1px;
            transform: scale(1.1);
            left: 154px;
            top: 125px;
        }

        .star4 {
            width: 1px;
            height: 1px;
            transform: scale(1.1);
            left: 83px;
            top: 129px;
        }

        .star5 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 129px;
            top: 151px;
        }

        .star6 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 138px;
            top: 51px;
        }

        .star7 {
            width: 1px;
            height: 1px;
            transform: scale(1.1);
            left: 77px;
            top: 137px;
        }

        .star8 {
            width: 1px;
            height: 1px;
            transform: scale(1.1);
            left: 68px;
            top: 2px;
        }

        .star9 {
            width: 3px;
            height: 3px;
            transform: scale(1.1);
            left: 2px;
            top: 4px;
        }

        .star10 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 55px;
            top: 28px;
        }

        .star11 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 37px;
            top: 143px;
        }

        .star12 {
            width: 3px;
            height: 3px;
            transform: scale(1.1);
            left: 51px;
            top: 39px;
        }

        .star13 {
            width: 3px;
            height: 3px;
            transform: scale(1.1);
            left: 76px;
            top: 120px;
        }

        .star14 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 99px;
            top: 52px;
        }

        .star15 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 31px;
            top: 130px;
        }

        .star16 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 139px;
            top: 129px;
        }

        .star17 {
            width: 1px;
          .........完整代码请登录后点击上方下载按钮下载查看