红灯笼高高挂摆动迎新年新年快乐动画效果代码-html代码-BFW代码库

红灯笼高高挂摆动迎新年新年快乐动画效果代码

代码语言：html

所属分类：动画

代码描述：红灯笼高高挂摆动迎新年新年快乐动画效果代码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新年快乐</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .lantern-box {
            position: fixed;
            pointer-events: none;
        }
        .lantern-light {
            position: relative;
            width: 120px;
            height: 90px;
            background-color: #d8000f;
            margin: 50px;
            border-radius: 50%;
            box-shadow: -5px 5px 50px 4px #fa6c00;
            animation: swing 3s infinite ease-in-out;
        }
        .lantern-light::before,.lantern-light::after {
            content: "";
            position: absolute;
            border: 1px solid #dc8f03;
            width: 60px;
            height: 12px;
            background: linear-gradient(toright,#dc8f03,#ffa500,#dc8f03,#ffa500,#dc8f03);
            margin-left: 20px;
            left: 10px;
        }
        .lantern-light::before {
            top: -7px;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }
        .lantern-light::after {
            bottom: -7px;
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
        }
        .lantern-line {
            width: 2px;
            height: 50px;
            background-color: #dc8f03;
            position: absolute;
            top: -50px;
            left: 60px;
        }
        .lantern-circle,.lantern-rect {
            height: 90px;
            border-radius: 50%;
            border: 2px solid #dc8f03;
            background-color: rgba(216,0,15,.1);
        }
        .lantern-circle {
            width: 100px;
            margin: 12px 8px 8px 10px;
        }
        .lantern-rect {
            margin: -2px 8px 8px 26px;
            width: 45px;
        }
        .lantern-text {
            font: bold 2rem / 85px 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
            text-align: center;
            color: #dc8f03;
        }
        .lantern-tassel-top {
            width: 5px;
            height: 20px;
            background-color: #ffa500;
            border-radius: 0 0 5px 5px;
            position: relative;
       .........完整代码请登录后点击上方下载按钮下载查看