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

代码语言：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;
            height: 1px;
            transform: scale(1.1);
            left: 76px;
            top: 220px;
        }

        .star18 {
            width: 1px;
            height: 1px;
            transform: scale(1.1);
            left: 32px;
            top: 31px;
        }

        .star19 {
            width: 3px;
            height: 3px;
            transform: scale(1.1);
            left: 127px;
            top: 97px;
        }

        .star20 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 59px;
            top: 33px;
        }

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

        .star22 {
            width: 1px;
            height: 1px;
            transform: scale(1.1);
            left: 117px;
            top: 80px;
        }

        .star23 {
            width: 1px;
            height: 1px;
            transform: scale(1.1);
            left: 5px;
            top: 17px;
        }

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

        .star25 {
            width: 2px;
            height: 2px;
            transform: scale(1.1);
            left: 57px;
            top: 210px;
        }

        .lanternX1 {
            position: absolute;
            bottom: -80px;
            left: 92px;
            transform: translateX(0);
            animation-name: lanternX1;
            animation-duration: 9s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .lanternY1 {
            display: inline block;
            width: 49px;
            z-index: 49000;
            animation-name: lanternY;
            animation-duration: 7s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform: translateY(0);
            animation-delay: 6s;
        }

@keyframes lanternX1 {
            50% {
                transform: translateX(66px);
            }
        }
@keyframes lanternY {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-200px);
            }
            100% {
                transform: translateY(-400px);
            }
        }
        .lanternX2 {
            position: absolute;
            bottom: -80px;
            left: 37px;
            transform: translateX(0);
            animation-name: lanternX2;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .lanternY2 {
            display: inline block;
            width: 52px;
            z-index: 52000;
            animation-name: lanternY;
            animation-duration: 7s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform: translateY(0);
            animation-delay: 6s;
        }

@keyframes lanternX2 {
            50% {
                transform: translateX(34px);
            }
        }
@keyframes lanternY {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-200px);
            }
            100% {
                transform: translateY(-400px);
            }
        }
        .lanternX3 {
            position: absolute;
            bottom: -80px;
            left: 28px;
            transform: translateX(0);
            animation-name: lanternX3;
            animation-duration: 9s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .lanternY3 {
            display: inline block;
            width: 45px;
            z-index: 45000;
            animation-name: lanternY;
            animation-duration: 3s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform: translateY(0);
            animation-delay: 3s;
        }

@keyframes lanternX3 {
            50% {
                transform: translateX(37px);
            }
        }
@keyframes lanternY {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-200px);
            }
            100% {
                transform: translateY(-400px);
            }
        }
        .lanternX4 {
            position: absolute;
            bottom: -80px;
            left: 74px;
            transform: translateX(0);
            animation-name: lanternX4;
            animation-duration: 6s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .lanternY4 {
            display: inline block;
            width: 64px;
            z-index: 64000;
            animation-name: lanternY;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform: translateY(0);
            animation-delay: 2s;
        }

@keyframes lanternX4 {
            50% {
                transform: translateX(5px);
            }
        }
@keyframes lanternY {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-200px);
            }
            100% {
                transform: translateY(-400px);
            }
        }
        .lanternX5 {
            position: absolute;
            bottom: -80px;
            left: 33px;
            transform: translateX(0);
            animation-name: lanternX5;
            animation-duration: 8s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .lanternY5 {
            display: inline block;
            width: 65px;
            z-index: 65000;
            animation-name: lanternY;
            animation-duration: 5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
            transform: translateY(0);
            animation-delay: 3s;
        }

@keyframes lanternX5 {
            50% {
                transform: translateX(46px);
            }
        }
@keyframes lanternY {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-200px);
            }
            100% {
                transform: translateY(-400px);
            }
        }
        .lanternX6 {
            position: absolute;
            bottom: -80px;
            left: 68px;
            transform: translateX(0);
            animation-name: lanternX6;
            animation-duration: 8s;
            animation-iteration-count: infinite;
            animation-timing-function: ease-in-out;
        }

        .lanternY6 {
            display: inline block;
            width: 63px;
            z-index: 63000;
            ani.........完整代码请登录后点击上方下载按钮下载查看